我正在Angular2应用程序上工作，我需要显示-但是disable是<a> HTML元素。正确的方法是什么？
更新
请注意*ngFor，这会阻止使用选项，*ngIf而不是<a>完全渲染。
<a *ngFor="let link of links"
href="#"
[class.disabled]="isDisabled(link)"
(click)="onClick(link)">
{{ link.name }}
</a>
该打字稿组件有一个方法，看起来像这样：
onClick(link: LinkObj) {
// Do something relevant with the object...
return false;
}
我实际上需要防止元素被单击，而不仅仅是与CSS一起出现。我以为我首先需要潜在地绑定到该[disabled]属性，但这是不正确的，因为锚元素没有disabled属性。
我查看并考虑过使用，pointer-events: none但这妨碍了我的cursor: not-allowed工作方式－这是要求的一部分。
pointer-events: none在CSS中指定会禁用鼠标输入，但不会禁用键盘输入。例如，用户仍然可以选择链接并通过Enter按键或（在Windows中）≣ Menu键“单击”它。您可以通过拦截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ünterZö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;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句