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

Question

我正在开发一个Angular2应用程序，我需要显示—但是＜code＞禁用＜code＞一个＜code＞

更新

请注意*ngFor，这将阻止使用*ngIF而不渲染的选项

<a *ngFor="let link of links"
   href="#" 
   [class.disabled]="isDisabled(link)" 
   (click)="onClick(link)">
   {{ link.name }}
</a>

TypeScript 组件有一个如下所示的方法：

onClick(link: LinkObj) {
    // Do something relevant with the object... 
    return false;
}

我需要防止元素被点击，而不仅仅是让它看起来像是CSS。我假设我首先需要潜在地绑定到＜code＞〔disabled〕

我考虑过使用< code>pointer-events: none,但是这妨碍了我的< code>cursor: not-allowed风格的工作——这是需求的一部分。

Answer 1

我的回答可能会迟到。它可以通过仅在锚标签中的内联css来实现。

考虑到＜code＞isDisabled＜/code＞是组件中的一个属性，它可以是＜code＞true＜/code＞或＜code＞false＜/code＞。

普朗克：https://embed.plnkr.co/TOh8LM/

Answer 2

对于< code>[routerLink]，您可以使用:

添加此CSS应该满足您的要求：

a.disabled {
   pointer-events: none;
   cursor: not-allowed; 
}

这应该可以解决@MichelLiu在评论中提到的问题:

<a href="#" [class.disabled]="isDisabled(link)"
    (keydown.enter)="!isDisabled(link)">{{ link.name }}</a>

另一种方法

<a [routerLink]="['Other']" *ngIf="!isDisabled(link)">{{ link.name }}</a>
<a  *ngIf="isDisabled(link)">{{ link.name }}</a>  

Plunker 示例

Answer 3

在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ünter zch Bauer的回答，您可以创建两个链接，一个正常，一个禁用，并使用< code>*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;
}