entityMap|0|type|LINK|mutability|MUTABLE|data|url|https://stackoverflow.com/questions/36985112/angular2-what-is-the-correct-way-to-disable-an-anchor-element|blocks|key|dsft9|text|禁用pointer-events在元素上通过CSS：|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|bf9t9|Link

a.disabled+{
+++pointer-events:+none;
+++cursor:+default;
}|code-block|syntax|javascript|c5ddd|另请参阅Angular2，禁用锚点element?的正确方法是什么|7aksj|或者|2rqpm|Link
not+a+link|be30p|或轻松重用禁用的链接样板|6dh2|not+a+link

Link^0|2|E|0|0|4|L|0|0|0|0|0^^$0|$1|$2|3|4|5|6|$7|8]]]|9|@$A|B|C|D|2|E|F|11|G|@$H|12|I|13|J|K]]|L|@]|6|$]]|$A|M|C|N|2|O|F|14|G|@]|L|@]|6|$P|Q]]|$A|R|C|S|2|E|F|15|G|@]|L|@$H|16|I|17|A|18]]|6|$]]|$A|T|C|U|2|E|F|19|G|@]|L|@]|6|$]]|$A|V|C|W|2|O|F|1A|G|@]|L|@]|6|$P|Q]]|$A|X|C|Y|2|E|F|1B|G|@]|L|@]|6|$]]|$A|Z|C|10|2|O|F|1C|G|@]|L|@]|6|$P|Q]]]]

Disable <code>pointer-events</code> on the element via CSS:

<pre class="lang-ts prettyprint-override"><code>&lt;a [routerlink]="xxx" [class.disabled]="disabled ? true : null"&gt;Link&lt;/a&gt;

a.disabled {
 pointer-events: none;
 cursor: default;
}
</code></pre>

See also <a href="https://stackoverflow.com/questions/36985112/angular2-what-is-the-correct-way-to-disable-an-anchor-element">Angular2, what is the correct way to disable an anchor element?</a>

or

<pre class="lang-ts prettyprint-override"><code>&lt;a *ngIf="isEnabled" [routerlink]="xxx"&gt;Link&lt;/a&gt;
&lt;div *ngIf="!isEnabled"&gt;not a link&lt;/div&gt;
</code></pre>

or to easily reuse the disabled link template

<pre class="lang-ts prettyprint-override"><code>&lt;ng-template #disabledLink&gt;
 &lt;div *ngIf="!isEnabled"&gt;not a link&lt;/div&gt;
&lt;/ng-template&gt;
&lt;a *ngIf="isEnabled; else disabledLink" [routerLink]="xxx"&gt;Link&lt;/a&gt;
</code></pre>

entityMap|blocks|key|2ltcm|text|我刚刚在一个类似的问题上取得了一些成功:在ngFor中有一组导航链接，其中一些需要routerLink，而其他人需要(点击)-我的问题是所有链接都依赖于routerLink对于routerLinkActive，所以我不得不停止routerLink，而不能触及它的价值。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5cddt|`|code-block|syntax|js^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|I|9|@]|A|@]|B|$F|G]]]]

I've just had some success with a similar issue: having an array of nav links in an ngFor, some required [routerLink], while others required (click) - my issue was that all links relied on [routerLink] for [routerLinkActive], so I had to stop routerLink, without touching it's value.

<pre><code>`&lt;a [routerLink]="item.link" routerLinkActive="isActive"&gt;
 &lt;span (click)="item.click ? item.click($event) : void&gt;
&lt;/a&gt;`
</code></pre>

with:

<pre><code>`click: ($event) =&gt; {
 $event.stopPropagation(); // Only seems to
 $event.preventDefault(); // work with both
 // Custom onClick logic
}`
</code></pre>

As the span is inside, you can be sure the cancelling of the event happens before it bubbles up to [routerLink], while routerLinkActive will still apply.

entityMap|blocks|key|1bec7|text|禁用pointer-events打开任何html标签：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|b3g4t|Click+me|code-block|syntax|js|7ghi4|'none'解析为禁用pointer-events即禁用链路。|7cjb1|null决定忽略该样式。^0|2|E|0|0|0|6|B|E|0|0|4^^$0|$]|1|@$2|3|4|5|6|7|8|P|9|@$A|Q|B|R|C|D]]|E|@]|F|$]]|$2|G|4|H|6|I|8|S|9|@]|E|@]|F|$J|K]]|$2|L|4|M|6|7|8|T|9|@$A|U|B|V|C|D]|$A|W|B|X|C|D]]|E|@]|F|$]]|$2|N|4|O|6|7|8|Y|9|@$A|Z|B|10|C|D]]|E|@]|F|$]]]]

Disabling <code>pointer-events</code> on any html tag:

<pre><code>&lt;div [routerLink]="['/home', { foo: bar }]"
 [ngStyle]="{'pointer-events': myLinkEnabled ? 'none' : null}"&gt;
 Click me
&lt;/div&gt;
</code></pre>

<code>'none'</code> resolves to disabling <code>pointer-events</code>, that is, disabling the link.

<code>null</code> resolves to ignore the style.

entityMap|blocks|key|5m049|text|不幸的是，Angular似乎没有空值支持routerLink。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|ert4f|然而，这对我来说是可行的。我的菜单实现的一个示例：|dku7p|简单地说，如果一个类别有任何子类别，不要重定向，而是打开子类别。^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|G|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|H|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|I|9|@]|A|@]|B|$]]]]

Unfortunately, Angular doesn't seem to have a null value support for the routerLink.

However, this works for me. An example of my menu implementation:

<pre class="lang-html prettyprint-override"><code>&lt;div *ngFor="let category of categories" [routerLink]="category.subcategories ? [] : [category.link]" (click)="toggleSubcategories(category)"&gt;
</code></pre>

Simply put, if a category has any subcategories, don't redirect, but open the subcategories.

entityMap|0|type|LINK|mutability|MUTABLE|data|url|https://stackoverflow.com/a/45323200/3241192|1|https://yehe.woa.com/ask/foreign-questions|blocks|key|1mmtv|text|所有排名靠前的答案都是变通的。|unstyled|depth|inlineStyleRanges|entityRanges|bmj7|最好的方法是你可以在这个解决方案中找到的东西https://stackoverflow.com/a/45323200/3241192由@taras-d|offset|length|9t3kg|另一种禁用routerLink的方法--替换onClick方法。|elq38|为此，您必须创建指令：|cqv0o|从‘@angular/核心’导入{指令，输入，可选}；从‘@angular/router’导入{+RouterLink，RouterLinkWithHref+}；@指令({选择器：‘routerLink‘})导出类输入{@+DisableLinkDirective+()+disableLink:+boolean；构造函数(+//注入routerLink+@Optional()+routerLink:+RouterLink，@Optional()+routerLinkWithHref:+RouterLinkWithHref+){+const+DisableLinkDirective=+routerLink+%7C%7C+routerLinkWithHref；//保存原始方法const+onClick+=+link.onClick；//替换方法link.onClick+=+(...args)+=>+{+if+(this.disableLink)+{+return+routerLinkWithHref？false:+true；}+else+{+return+onClick.apply(link，args)；}+}；}}|bfbo7|用法：|93l3l|Search|style|CODE^0|0|M|18|0|0|0|0|0|0|0|6|0|6|1^^$0|$1|$2|3|4|5|6|$7|8]]|9|$2|3|4|5|6|$7|A]]]|B|@$C|D|E|F|2|G|H|10|I|@]|J|@]|6|$]]|$C|K|E|L|2|G|H|11|I|@]|J|@$M|12|N|13|C|14]]|6|$]]|$C|O|E|P|2|G|H|15|I|@]|J|@]|6|$]]|$C|Q|E|R|2|G|H|16|I|@]|J|@]|6|$]]|$C|S|E|T|2|G|H|17|I|@]|J|@]|6|$]]|$C|U|E|V|2|G|H|18|I|@]|J|@]|6|$]]|$C|W|E|X|2|G|H|19|I|@$M|1A|N|1B|Y|Z]]|J|@$M|1C|N|1D|C|1E]]|6|$]]]]

All the top answer are workaround.
The best way is something you can find in this solution <a href="https://stackoverflow.com/a/45323200/3241192">https://stackoverflow.com/a/45323200/3241192</a> by @taras-d
<blockquote>
Another way to disable routerLink - replace onClick method.
To do this you have to create directive:
<pre><code>import { Directive, Input, Optional } from '@angular/core';
import { RouterLink, RouterLinkWithHref } from '@angular/router';

@Directive({
 selector: '[routerLink][disableLink]'
})
export class DisableLinkDirective {

 @Input() disableLink: boolean;

 constructor(
 // Inject routerLink
 @Optional() routerLink: RouterLink,
 @Optional() routerLinkWithHref: RouterLinkWithHref
 ) {

 const link = routerLink || routerLinkWithHref;

 // Save original method
 const onClick = link.onClick;

 // Replace method
 link.onClick = (...args) =&gt; {
 if (this.disableLink) {
 return routerLinkWithHref? false: true;
 } else {
 return onClick.apply(link, args);
 }
 };
 }

}
</code></pre>
Usage:
<code>&lt;a routerLink=&quot;/search&quot; [disableLink]=&quot;!isLogged&quot;&gt;Search&lt;/a&gt;</code>
</blockquote>

entityMap|blocks|key|6quv2|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data^0^^$0|$]|1|@$2|3|4|5|6|7|8|C|9|@]|A|@]|B|$]]]]

Try this:

<pre class="lang-html prettyprint-override"><code>&lt;div *ngFor="let childitem of menuitem.MenuRoutes"&gt;
&lt;a [routerLink]="menuitem.IsMain ? [childitem.Route] : []"&gt;&lt;a&gt;
&lt;/&gt;
</code></pre>

In my Angular 2 application I'm trying to disable a routerLink without any success. I've tried to handle the click event on the <code>click</code> event (with <code>event.preventDefault()</code> and <code>event.stopPropagation()</code>) but it doesn't work.

How can I disable a routerLink?

How can I conditionally disable the routerLink attribute?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

 在我的Angular 2应用程序中，我试图禁用一个routerLink，但没有成功。我已尝试处理click事件(带有event.preventDefault()和event.stopPropagation())，但它不工作。 如何禁用routerLink？

问如何有条件地禁用routerLink属性？
EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何有条件地禁用routerLink属性？EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何有条件地禁用routerLink属性？
EN