Angular2，禁用锚元素的正确方法是什么？

Question

我正在 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工作方式-这是要求的一部分。

Answer 1

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;
}