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

我正在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;
}

对于[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>  

柱塞示例

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

在提供的OP的标记中，有一个click事件绑定。这使我认为这些元素被用作“按钮”。如果是这样，则可以将它们标记为<button>元素，并按照链接的样式进行样式设置（如果您希望这样）。（例如，Bootstrap具有内置的“链接”按钮样式，即https://v4-alpha.getbootstrap.com/components/buttons/#examples）

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

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

对于这篇文章，我的回答可能太迟了。这只能通过anchor标签中的内联css实现。

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

考虑isDisabled到组件中的属性可以是true或false。

傻瓜：https ://embed.plnkr.co/TOh8LM/

   .disabled{ pointer-events: none }

将禁用click事件，但不会禁用tab事件。要禁用选项卡事件，如果disable标志为true，则可以将tabindex设置为-1。

<li [routerLinkActive]="['active']" [class.disabled]="isDisabled">
     <a [routerLink]="['link']" tabindex="{{isDisabled?-1:0}}" > Menu Item</a>
</li>

考虑以下解决方案

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

这适用于充当标签的锚标签：

[ngStyle]="{'pointer-events': isSaving ? 'none': 'auto'}"

我用过了

tabindex="{{isEditedParaOrder?-1:0}}" 
[style.pointer-events]="isEditedParaOrder ?'none':'auto'" 

在我的锚标签中，这样他们就不能通过使用制表符使用“ enter”键和指针本身来移动到锚标签，我们基于属性“ isEditedParaO rder” whi将其设置为“ none”

你可以试试这个

<a [attr.disabled]="someCondition ? true: null"></a>

只需使用

<a [ngClass]="{'disabled': your_condition}"> This a tag is disabled</a>

例：

 <a [ngClass]="{'disabled': name=='junaid'}"> This a tag is disabled</a>