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

Posted 2023-03-13

【中文标题】[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 提到的样式一起添加指针事件：无；

【参考方案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>