Angular2，如何正确禁用一个锚元素？
Angular2，如何正确禁用一个锚元素？
我正在开发一个Angular2应用程序，我需要显示一个 HTML元素，但是禁用它。这该怎么做呢？
更新
请注意*ngFor，这将阻止使用*ngIf并完全不渲染的选项。
href="#" [class.disabled]="isDisabled(link)" (click)="onClick(link)"> {{ link.name }}
TypeScript组件有一个如下所示的方法：
onClick(link: LinkObj) {
// 执行与对象相关的操作...
return false;
}
我需要实际上阻止元素可点击，而不仅仅是使用CSS显示为不可点击。一开始我以为需要绑定到[disabled]属性，但是这是错误的，因为锚元素没有disabled属性。
我考虑过使用pointer-events: none，但这会阻止我的cursor: not-allowed样式起作用 - 这是要求的一部分。
Angular2中禁用锚点元素的正确方法是通过在锚点标签内使用内联css来实现。可以使用以下代码：
click-label
其中，`isDisabled`是组件中的一个属性，它可以是`true`或`false`。
但是有人认为这种方法是不正确的，因为Angular仍然会传播(click)绑定，因此仍然会触发点击事件。他们建议创建一个Plunker，并在此处分享。
我添加了一个Plunker作为演示。点击以下链接查看：
[embed.plnkr.co/TOh8LM](https://embed.plnkr.co/TOh8LM)
在Plunker中，我只是给href标签添加了参考，类似地，也可以在锚点标签内使用`routerLink`指令来实现相同的效果。
在Angular2中，禁用锚点元素的正确方法是什么？
问题的出现原因是指定CSS中的pointer-events: none可以禁用鼠标输入，但无法禁用键盘输入。例如，用户仍然可以通过按下Enter键或(在Windows中)按下≣ Menu键来通过在链接上按Tab键并"点击"它。可以通过拦截keydown事件来禁用特定的按键，但这可能会让依赖辅助技术的用户感到困惑。
解决方法之一是通过移除锚点元素的href属性，使其变为非链接。可以使用条件href属性绑定来动态实现这一点：
<a *ngFor="let link of links"
[attr.href]="isDisabled(link) ? null : '#'"
[class.disabled]="isDisabled(link)"
(click)="!isDisabled(link) && onClick(link)">
{{ link.name }}
</a>
或者，可以像Günter Zöchbauer的答案中那样，创建两个链接，一个正常的链接，一个禁用的链接，并使用*ngIf来显示其中之一：
<ng-template ngFor #link [ngForOf]="links">
<a *ngIf="!isDisabled(link)" href="#" (click)="onClick(link)">{{ link.name }}</a>
<a *ngIf="isDisabled(link)" class="disabled">{{ link.name }}</a>
</ng-template>
以下是使链接看起来禁用的CSS样式：
a.disabled {
color: gray;
cursor: not-allowed;
text-decoration: underline;
}
即使<a>元素缺少href属性，它仍然可以点击，我刚刚验证过...现在怎么办？还是不完美。
我已经更新了我的答案来处理click事件。
这种方法的一个缺点是会丧失SEO效果，请查看：webmasters.stackexchange.com/questions/74032/...
还可以在标签中使用[attr.disabled]="isDisabled(link)"。
不要在<a>标签上使用[attr.disabled]。这不符合标准，并且只在Internet Explorer中有效，而不在Chrome或Firefox中有效。
只是一个注意事项：不要在模板中的属性（如ngIf）中调用Angular中的函数，这会影响性能，因为它们每秒会被调用x次，除非组件的cd策略是推送。请使用属性、指令或提到的cd策略。
Angular2中正确禁用锚点元素的方法是什么？
问题出现的原因：
用户可以通过tab键选中链接并按Enter键。即使使用了disabled属性，也无法完全禁用锚点元素。
解决方法：
可以通过以下几种方式来禁用锚点元素：
1. 使用CSS样式：a.disabled { pointer-events: none; cursor: not-allowed; }
- 使用此样式可以实现所需的效果。
2. 使用[class.disabled]属性和(keydown.enter)事件来动态禁用锚点元素：<a href="#" [class.disabled]="isDisabled(link)" (keydown.enter)="!isDisabled(link)">{{ link.name }}</a>
- 使用isDisabled(link)方法来判断是否禁用锚点元素。
3. 使用*ngIf指令来动态显示或隐藏锚点元素：<a [routerLink]="['Other']" *ngIf="!isDisabled(link)">{{ link.name }}</a>
- 如果isDisabled(link)返回true，则隐藏锚点元素。
4. 使用*ngIf指令和[class.disabled]属性来动态设置锚点元素的样式：<a *ngIf="isDisabled(link)">{{ link.name }}</a>
- 如果isDisabled(link)返回true，则显示锚点元素，并使用样式类.disabled来设置样式。
以上是禁用锚点元素的几种方法，可以根据具体需求选择适合的方法。