为什么禁用的 RouterLink 仍然有效？

Question

问题

我对处于活动状态的链接有疑问，尽管它们的 disabled 属性设置为 true。

设置

从official documentation of Angular Material遵循这个模式：

<a mat-button href="https://www.google.com/" target="_blank">Link</a>

我正在构建我的应用的导航部分，如下所示：

<nav>
    <a mat-button routerLink="/foo" [disabled]="true">Foo</a>
    <a mat-button routerLink="/moo" [disabled]="true">Moo</a>
    <a mat-button href="https://www.google.com/" target="_blank" [disabled]="true">Link</a>
</nav>

<router-outlet></router-outlet>

如图所示，链接确实显示为非活动状态。但是，只有href-link 被真正禁用。带有routerLink 的应用内导航仍然有效，我可以通过单击它们来更改页面。

示例

我准备了一个example project on Stackblitz 来演示这个问题。

如何使禁用的 routerLinks 处于非活动状态？

---

更新 1

为了实验，我将nav 替换为mat-nav-list，将mat-buttons 替换为mat-list-item，如下所示：

<mat-nav-list>
    <a mat-list-item routerLink="/foo" [disabled]="true">Foo</a>
    <a mat-list-item routerLink="/moo" [disabled]="true">Moo</a>
    <a mat-list-item href="https://www.google.com/" target="_blank" [disabled]="true">Link</a>
</mat-nav-list>

现在它按预期工作，但前景不是我想要的。

我也可以用button 替换a-tag 并添加一个click-listener 调用Router.navigate，但正如标题所说，我想知道为什么禁用的RouterLink仍然有效以及如何真正（不仅是视觉上）禁用它。

---

更新 2

同时，我已将其作为 bug 报告给 Angular Material。

Answer 1

我没有足够的代表发表评论，但似乎有角度的材料仅用于设计，这意味着您正在禁用标签上的 CSS。如果你想停止路由器，我认为你需要在打字稿方面做，制作一个功能来检查按钮是否被禁用并相应地导航。