如何在Angular的mat-tab-nav-bar中禁用导航链接的点击事件？

下面几种方法可以实现需求：

方法1：利用mat-tab-link原生的disabled属性 #

Angular Material的mat-tab-link组件支持disabled输入属性，设置后会自动添加禁用样式并阻止路由跳转。

步骤： #

1. 更新TS中navLinks的结构，增加disabled字段：

public navLinks: { label: string, route: string, disabled?: boolean }[] = this.activatedRoute.snapshot.data['tabs'];

// 示例：动态设置某个链接禁用，比如第一个标签页
this.navLinks[0].disabled = true;

2. 在HTML模板中绑定disabled属性：

<nav mat-tab-nav-bar color="primary" [tabPanel]="tabPanel" mat-stretch-tabs="false" mat-align-tabs="start">
  <a mat-tab-link 
     *ngFor="let link of navLinks" 
     [routerLink]="link.route" 
     routerLinkActive #rla="routerLinkActive" 
     [active]="rla.isActive"
     [disabled]="link.disabled">
    {{ link.label | translate }}
  </a>
</nav>

方法2：直接阻止点击事件 #

如果不想修改navLinks结构，可通过阻止点击事件的默认行为来禁用跳转，适合临时禁用场景。

无条件禁用所有链接： #

<nav mat-tab-nav-bar color="primary" [tabPanel]="tabPanel" mat-stretch-tabs="false" mat-align-tabs="start">
  <a mat-tab-link 
     *ngFor="let link of navLinks" 
     [routerLink]="link.route" 
     routerLinkActive #rla="routerLinkActive" 
     [active]="rla.isActive"
     (click)="$event.preventDefault(); $event.stopPropagation()">
    {{ link.label | translate }}
  </a>
</nav>

条件性禁用： #

如果需要根据某个变量控制是否禁用，比如shouldDisable：

(click)="shouldDisable ? ($event.preventDefault(); $event.stopPropagation()) : null"

在TS中定义变量：

public shouldDisable = true; // 控制是否禁用

方法3：动态控制routerLink的有效性 #

通过将routerLink绑定为null/undefined，让路由跳转失效，这种方法需要自己添加禁用样式。

实现： #

<nav mat-tab-nav-bar color="primary" [tabPanel]="tabPanel" mat-stretch-tabs="false" mat-align-tabs="start">
  <a mat-tab-link 
     *ngFor="let link of navLinks" 
     [routerLink]="link.disabled ? null : link.route"
     routerLinkActive #rla="routerLinkActive" 
     [active]="rla.isActive">
    {{ link.label | translate }}
  </a>
</nav>

补充禁用样式： #

在组件CSS中添加：

.mat-tab-link[routerLink="null"] {
  pointer-events: none;
  opacity: 0.5;
  cursor: not-allowed;
}

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