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?

 在我的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