[attr.disabled]="true" does not working in anchor tag [duplicate]答案

【问题标题】：[attr.disabled]="true" does not working in anchor tag [duplicate][attr.disabled]="true" does not working in anchor tag [duplicate]
【发布时间】：2017-10-29 15:48:51
【问题描述】：

为什么[attr.disabled]="true" 在锚标签中不起作用？

组件：

this.isHold=true;

html:

<a (click)="showDialogToHold()" href="Javascript:void(0);" class="a-l2-link 
img-space" icon="fa-angle-right" [attr.disabled]="isHold">Hold</a>

我也试过[disabled]="isHold"。但是[disabled] 不支持锚标签。它抛出这个错误Can't bind to 'disabled' since it isn't a known property of 'a' 与Can't bind to 'disabled' since it isn't a known property of 'li' 相关

【问题讨论】：

你不能禁用<a>！也许你可以添加一些样式让它看起来像text-decoration:none、cursor:default和color:grey这样被禁用！
我想禁用基于用户角色的链接。我该怎么办？
我的建议是：如果他/她没有被授权，不要向用户显示链接！
但是我的设计看起来很丑，如果我使用的是显示/隐藏的话。有什么想法吗？
与@DhavalMarthak 提到的样式一起添加指针事件：无；

标签： angular typescript attributes anchor

【解决方案1】：

html 中的超链接没有禁用属性。参考https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a。因此，您可以使用 css 来实现这一点。

CSS 代码：

    text-decoration:none;
    cursor:default;
    color:grey;
    pointer-events:none;

【讨论】：

【解决方案2】：

试试看：

  <a (click)="showDialogToHold()" href="Javascript:void(0);" class="a-l2-link 
    img-space" icon="fa-angle-right" disabled={{isHold}}>Hold</a>

【讨论】：

是否支持angular 2？
是的，它的支持角度
不。它不工作

【解决方案3】：

   .disabled {
           pointer-events: none !important;
           cursor: default;
    }

<a (click)="showDialogToHold()" href="Javascript:void(0);" class="a-l2-link 
img-space" icon="fa-angle-right" [ngStyle]="{ 'disabled ': isHold }">Hold</a>

【讨论】：