web-dev-qa-db-ja.com

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>

TypeScriptコンポーネントには、次のようなメソッドがあります。

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

CSSであるように見えるだけでなく、要素がクリック可能になるのを実際に防ぐ必要があります。最初は[disabled]属性に潜在的にバインドする必要があると思っていましたが、アンカー要素にはdisabledプロパティがないため、これは間違っています。

pointer-events: noneの使用を検討しましたが、これにより、cursor: not-allowedのスタイルが機能しなくなります。これは要件の一部です。

htmldomtypescriptangularangular2-template
54
David Pine

CSSでpointer-events: noneを指定すると、マウス入力は無効になりますが、キーボード入力は無効になりません。たとえば、ユーザーは引き続きリンクにタブで移動し、[ Enter キーまたは（Windowsの場合） ≣ Menu キー。 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ünterZöchbauerの答えのように、1つは通常のリンク、もう1つは無効のリンクを作成し、*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;
}
76
Michael Liu

[routerLink]には次を使用できます。

このCSSを追加すると、次のようになります。

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

これにより、@ MichelLiuがコメントで言及した問題が修正されます。

<a href="#" [class.disabled]="isDisabled(link)"
    (keydown.enter)="!isDisabled(link)">{{ link.name }}</a>

別のアプローチ

<a [routerLink]="['Other']" *ngIf="!isDisabled(link)">{{ link.name }}</a>
<a  *ngIf="isDisabled(link)">{{ link.name }}</a>

プランカーの例

28
Günter Zöchbauer

この質問に出くわし、別のアプローチを提案したかったのです。

OPが提供するマークアップには、クリックイベントバインディングがあります。これにより、要素が「ボタン」として使用されていると思うようになります。その場合、<button>要素としてマークアップし、リンクのようにスタイルを設定できます（それがあなたの望む外観である場合）。 （たとえば、Bootstrapには組み込みの「リンク」ボタンスタイルがあります https://v4-alpha.getbootstrap.com/components/buttons/#examples ）

これには、いくつかの直接的および間接的な利点があります。これにより、disabledプロパティにバインドできます。このプロパティを設定すると、マウスイベントとキーボードイベントが自動的に無効になります。 disabled属性に基づいて無効状態のスタイルを設定できるため、要素のクラスを操作する必要もありません。また、アクセシビリティにも優れています。

ボタンを使用するタイミングとリンクを使用するタイミングについての適切な説明については、「 リンクはボタンではありません。DIVおよびSPANでもありません 」を参照してください。

4
Van J. Wilson

私の答えはこの投稿に遅れる可能性があります。アンカータグ内のインラインcssを介してのみ実現できます。

<a [routerLink]="['/user']" [style.pointer-events]="isDisabled ?'none':'auto'">click-label</a>

isDisabledを考慮することは、trueまたはfalseの可能性があるコンポーネントのプロパティです。

それのためのプランカー： https://embed.plnkr.co/TOh8LM/

3
vineetk27
   .disabled{ pointer-events: none }

クリックイベントは無効になりますが、タブイベントは無効になりません。タブイベントを無効にするには、無効フラグがtrueの場合、tabindexを-1に設定します。

<li [routerLinkActive]="['active']" [class.disabled]="isDisabled">
     <a [routerLink]="['link']" tabindex="{{isDisabled?-1:0}}" > Menu Item</a>
</li>
2
Darin Cardin

利用した

tabindex="{{isEditedParaOrder?-1:0}}" 
[style.pointer-events]="isEditedParaOrder ?'none':'auto'"

タブを使用して「Enter」キーとポインター自体を使用してアンカータグに移動できないように、アンカータグで、プロパティ「isEditedParaO rder」に基づいて「なし」に設定

0
guest