如何使用条件禁用 <a> 链接？ [复制]答案

【问题标题】：How do you make an <a> link disabled using condition? [duplicate]如何使用条件禁用 <a> 链接？ [复制]
【发布时间】：2018-10-08 18:28:25
【问题描述】：

我使用 Angular 4 如何禁用 <a> 元素，条件是执行类似 [disabled]="!f.form.valid" 的操作

<a class="btn btn-primary btn-lg disabled" 
        href="https://mailtrap.io/inboxes/354346/messages" 
        target="_blank" (click)=f.form.reset() > Verify your Email Now</a>

如果你建议只使用链接按钮，我想知道如何添加target="_blank"

【问题讨论】：

你能改写你的问题吗？现在它没有多大意义。您的标题询问如何禁用锚点 (<a>)，但随后您询问有关添加 target="_blank" 的问题。请澄清。
抱歉，我只想要其中一个，如果我使用我如何禁用它，如果我使用按钮如何添加目标
@mplungjan - 我认为正确的副本是Angular2, what is the correct way to disable an anchor element?。

标签： html angular

【解决方案1】：

样式归功于this excellent post in css-tricks。

.isDisabled {
  color: currentColor;
  cursor: not-allowed;
  pointer-events: none
  opacity: 0.5;
  text-decoration: none;
}

<a [ngClass]="{'isDisabled':condition}"
   class="btn btn-primary btn-lg disabled" 
   href="https://mailtrap.io/inboxes/354346/messages" 
   target="_blank" (click)=f.form.reset() > Verify your Email Now</a>

【讨论】：

这只会让它看起来被禁用。如果你只想使用 CSS 添加pointer-events: none。不过，我建议在 JavaScript 中停止该事件。
@Phix 你是绝对正确的。我错过了。