Angular 4中如何通过条件禁用<a>标签及添加target="_blank"

在Angular 4里处理标签的禁用确实有点坑，因为原生<a>本身不支持disabled属性，直接加[disabled]="!f.form.valid"是不会生效的。我给你两种实用的解决方案，同时也会说明如何用链接按钮实现target="_blank"的需求：

方案一：改造原生标签实现禁用效果 #

我们可以通过动态添加禁用样式+阻止默认点击行为来模拟禁用状态：

1. 给<a>绑定条件类，控制禁用样式；
2. 在点击事件中判断表单有效性，无效时阻止跳转和后续操作。

修改后的代码示例：

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

如果Bootstrap的disabled类没自带阻止点击的样式，补充CSS：

.disabled {
  pointer-events: none;
  opacity: 0.6;
  cursor: not-allowed;
}

说明： #

• [class.disabled]="!f.form.valid"：表单无效时自动添加禁用类，让元素呈现禁用视觉状态；
• $event.preventDefault()：表单无效时阻止<a>的默认跳转行为；
• 仅当表单有效时，才会执行表单重置并跳转到目标链接。

方案二：改用按钮模拟链接（推荐） #

<button>原生支持disabled属性，处理逻辑更直观，我们可以通过window.open()实现target="_blank"的需求：

模板代码： #

<button 
  class="btn btn-primary btn-lg"
  [disabled]="!f.form.valid"
  (click)="handleEmailVerification()"
>
  Verify your Email Now
</button>

组件类代码： #

import { Component } from '@angular/core';
// 假设你已导入表单相关类

@Component({
  // 组件元数据
})
export class YourComponent {
  // 假设f是你的表单实例
  f: { form: FormGroup };

  handleEmailVerification() {
    // 新标签页打开目标链接，对应target="_blank"
    window.open('https://mailtrap.io/inboxes/354346/messages', '_blank');
    // 重置表单
    this.f.form.reset();
  }
}

说明： #

• [disabled]="!f.form.valid"：表单无效时按钮自动禁用，点击事件完全不触发；
• window.open(url, '_blank')：第二个参数_blank实现和<a>标签target="_blank"完全一致的效果；
• 用Bootstrap的btn类可以让按钮样式和原链接保持统一，无需额外调整。

内容的提问来源于stack exchange，提问作者AVA