为什么禁用了RouterLink还能用？

Question

疑问

我有一个问题，链接是活跃的，虽然他们的 disabled 属性设置为 true.

设置

按照这种模式，从 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 我可以通过点击它们来改变页面。

例子

我已经准备了一份 Stackblitz上的示例项目 来演示这个问题。

如何让禁用的routerLinks失效？

---

更新1

为了实验的需要，我用下面的内容代替了 nav 与 mat-nav-list 和 mat-button与 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>

现在，它的工作原理和预期一样， 但前景不是我想要的。

我也可以用 a-标签，并附有 button 并加上 click-倾听者呼叫 Router.navigate但正如标题所说，我想知道的是 为什么停用的RouterLink还能用？ 以及如何真正（不仅是视觉上）禁用它。

---

更新2

同时，我已将其报告为 虫子 到Angular Material。

Answer 1

我没有足够的经验来评论，但似乎Angular Material只用于设计，这意味着你要禁用标签上的CSS。如果你想停止路由器，我认为你需要在typecript端进行，做一个函数来检查按钮是否被禁用，并进行相应的导航与否。