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>

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

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

我实际上需要防止元素被点击，而不仅仅是看起来它与 CSS 。我假设我首先需要潜在地绑定到 [disabled] 属性，但这是不正确的，因为锚元素没有 disabled 属性。

我查看并考虑使用 pointer-events: none 但这会阻止我的风格 cursor: not-allowed 工作 - 这是要求的一部分。

原文由 David Pine 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在 CSS 中指定 pointer-events: none 会禁用鼠标输入，但不会禁用键盘输入。例如，用户仍然可以通过按 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 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;
}

原文由 Michael Liu 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

除了 class.disabled，我们还可以绑定一个带 disabled 属性的变量。这将仅用于按钮、输入和下拉菜单。 HTML disabled 属性

例如：

 <button [disabled]="isDisabled">Test</button>

演示

原文由 Vignesh 发布，翻译遵循 CC BY-SA 4.0 许可协议