[解決済み] Angular2、アンカー要素を無効にする正しい方法は何ですか？

質問

私は今 Angular2 アプリケーションに取り組んでいて、表示する必要があります -- しかし disable は <a> HTML という要素があります。これを行うための正しい方法は何でしょうか？

更新

このため *ngFor を使用するオプションが無効になります。 *ngIf をレンダリングしない <a> を完全にレンダリングしない。

<a *ngFor="let link of links"
   href="#" 
   [class.disabled]="isDisabled(link)" 
   (click)="onClick(link)">
   {{ link.name }}
</a>

この タイプスクリプト コンポーネントには、次のようなメソッドがあります。

onClick(link: LinkObj) {
    // Do something relevant with the object... 
    return false;
}

要素をクリックできるように見せるだけでなく、実際にクリックできないようにする必要があります。 CSS . 私は、潜在的に [disabled] 属性にバインドする必要があると仮定していましたが、アンカー要素には disabled プロパティを持たないからです。

を見て、その使い方を検討しました。 pointer-events: none を使うことも考えましたが、これでは私のスタイルである cursor: not-allowed が機能しなくなります -- そしてこれは要求の一部です。

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

指定方法 pointer-events: none を指定すると、マウス入力は無効になりますが、キーボード入力は無効にはなりません。例えば、ユーザはまだリンクにタブで移動して Enter キーまたは (Windows では) ≣メニュー キーです。を傍受することで、特定のキーストロークを無効にすることができます。 keydown イベントを傍受することで、特定のキーストロークを無効にすることができますが、これはおそらく支援技術に依存するユーザーを混乱させるでしょう。

リンクを無効にする最も良い方法は、おそらくその href 属性を削除し、非リンクにすることです。これは、条件付きで動的に行うことができます。 href 属性のバインディングで動的に行うことができます。

<a *ngFor="let link of links"
   [attr.href]="isDisabled(link) ? null : '#'"
   [class.disabled]="isDisabled(link)"
   (click)="!isDisabled(link) && onClick(link)">
   {{ link.name }}
</a>

あるいは、Günter Zöchbauer氏の回答のように、通常と無効の2つのリンクを作成し、それぞれを *ngIf を使って、どちらかを表示させることもできます。

<ng-template ngFor #link [ngForOf]="links">
    <a *ngIf="!isDisabled(link)" href="#" (click)="onClick(link)">{{ link.name }}</a>
    <a *ngIf="isDisabled(link)" class="disabled">{{ link.name }}</a>
</ng-template>

リンクが無効になっているように見せるためのCSSはこちらです。

a.disabled {
    color: gray;
    cursor: not-allowed;
    text-decoration: underline;
}