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

Answer 2

对于[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 来实现。

<a [routerLink]="['/user']" [style.pointer-events]="isDisabled ?'none':'auto'">click-label</a>

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

Plunker：https ://embed.plnkr.co/TOh8LM/

Answer 4

考虑以下解决方案

.disable-anchor-tag { 
  pointer-events: none; 
}

Answer 5

刚刚遇到这个问题，并想提出一种替代方法。

在 OP 提供的标记中，有一个单击事件绑定。这让我觉得这些元素被用作“按钮”。如果是这种情况，则可以将它们标记为<button>元素并设置为链接的样式（如果这是您想要的外观）。（例如，Bootstrap 内置了“链接”按钮样式，https://v4-alpha.getbootstrap.com/components/buttons/#examples）

这有几个直接和间接的好处。它允许您绑定到disabled属性，设置后将自动禁用鼠标和键盘事件。它允许您根据 disabled 属性设置禁用状态的样式，因此您不必同时操作元素的类。它的可访问性也更好。

有关何时使用按钮以及何时使用链接的好文章，请参阅链接不是按钮。DIV 和 SPAN 都不是