Angular按钮按条件禁用失效：点击仍跳转路由问题排查

看起来你遇到的核心问题是带routerLink的按钮即使设置了禁用状态，点击依然会触发路由导航，另外还有Angular版本指令混用的问题，我来一步步帮你解决：

1. 先纠正指令错误：别用ng-disabled #

ng-disabled是AngularJS（1.x）的专属指令，Angular 2+已经不再支持这个语法了，必须使用Angular的属性绑定语法[disabled]。

2. 核心问题：routerLink会绕过disabled状态 #

Angular的routerLink是通过监听点击事件触发导航的，即使按钮设置了disabled，点击事件依然会被触发（尤其是如果你的app-primary-button是自定义组件，内部没正确把disabled传递给原生按钮元素的话）。所以直接用routerLink + disabled的组合是不可靠的。

正确的解决方案 #

步骤1：初始化异步变量，避免undefined导致的判断异常

在你的TS文件里，给existReview设置一个初始值，避免异步请求返回前变量为undefined，导致条件判断逻辑混乱：

// 组件类中初始化变量，根据业务逻辑设置初始值
existReview = false;

ngOnInit() {
  this.reviewService.verifyUserHaveReviewToApp(this.app.appIdToSearch)
    .subscribe((res) => {
      this.existReview = res;
    });
}

步骤2：改用点击事件手动控制路由导航

去掉routerLink，换成在点击事件里判断条件后再导航，这样能彻底避免禁用状态下的跳转：
首先在组件里注入Router，然后添加导航方法：

import { Router } from '@angular/router';

// 构造函数注入Router
constructor(private router: Router, private reviewService: ReviewService) {}

navigateToAddReview() {
  // 只有当用户未提交过评论时才允许导航
  if (!this.existReview) {
    this.router.navigate([this.getAddReviewLink()]);
  }
}

然后修改模板中的按钮代码：

<app-primary-button 
  *ngIf="!userIsPartner || !isLogged" 
  (click)="navigateToAddReview()"
  [disabled]="existReview"
  matTooltip="{{ (!existReview ? 'apps.mouse-over-enabled' : 'apps.mouse-over-disable') | translate}}"
>
  Write review
</app-primary-button>

步骤3：确保自定义按钮组件正确处理disabled属性

如果你的app-primary-button是自定义组件，需要确保它接收disabled输入，并传递给内部的原生按钮：
在app-primary-button的组件类中添加：

import { Input } from '@angular/core';

@Input() disabled = false;

在其模板中：

<button [disabled]="disabled" class="your-button-styles">
  <ng-content></ng-content>
</button>

为什么之前的方法无效？ #

• ng-disabled：Angular 2+不识别这个指令，所以完全不起作用。
• [disabled]="!existReview"：因为existReview初始是undefined，!undefined会被解析为true，和你预期的逻辑相反，而且routerLink依然会触发导航。
• [disabled]="existReview != false"：初始状态下undefined != false为true，按钮会显示禁用，但routerLink的点击事件不受disabled状态影响，依然会执行跳转。

这样修改后，按钮会根据existReview的状态正确禁用，并且点击时只有符合条件才会导航到目标页面。

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