Проблема

У меня проблема со ссылками, которые активны, хотя их атрибут 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.