[解決済み] routerLink属性を条件付きで無効にするにはどうすればよいですか？

質問

Angular 2アプリケーションで、ルーターリンクを無効にしようとしていますが、うまくいきません。クリックイベントを処理するために click イベント ( event.preventDefault() と event.stopPropagation() など)ですが、うまくいきません。

ルーターリンクを無効にするにはどうしたらよいですか？

どのように解決するのですか？

無効化する pointer-events をCSSで無効にする。

<a [routerlink]="xxx" [class.disabled]="disabled ? true : null">Link</a>

a.disabled {
   pointer-events: none;
   cursor: default;
}

参照 Angular2、アンカー要素を無効にする正しい方法は何ですか？

または

<a *ngIf="isEnabled" [routerlink]="xxx">Link</a>
<div *ngIf="!isEnabled">not a link</div>

または、無効化されたリンクのテンプレートを簡単に再利用するために

<ng-template #disabledLink>
  <div *ngIf="!isEnabled">not a link</div>
</ng-template>
<a *ngIf="isEnabled; else disabledLink" [routerLink]="xxx">Link</a>