web-dev-qa-db-fra.com

Angular2, quelle est la bonne façon de désactiver un élément d'ancrage?

Je travaille sur une application Angular2 et j'ai besoin d'afficher - mais disable un <a>HTML élément. Quelle est la bonne façon de faire cela?

Mise à jour

Veuillez noter que *ngFor, cela empêcherait d'utiliser *ngIf et de ne pas restituer le <a>.

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

Le composant TypeScript a une méthode qui ressemble à ceci:

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

Je dois réellement empêcher l’élément d’être cliquable, et non seulement apparaître que c’est avec le CSS. Je supposais que je devais me lier potentiellement à l'attribut [disabled] au début, mais c'est incorrect car l'élément d'ancrage n'a pas de propriété disabled.

J'ai examiné et envisagé d'utiliser le pointer-events: none, mais cela empêche mon style de cursor: not-allowed de fonctionner - et cela fait partie de l'exigence.

htmldomtypescriptangularangular2-template
58
David Pine

La spécification de pointer-events: none dans CSS désactive l'entrée de la souris, mais pas celle du clavier. Par exemple, l’utilisateur peut toujours cliquer sur le lien et le "cliquer" en appuyant sur la touche Enter touche ou (sous Windows) la ≣ Menu clé. Vous pouvez désactiver certaines frappes au clavier en interceptant l'événement keydown, mais cela risquerait de gêner les utilisateurs qui utilisent des technologies d'assistance.

Le meilleur moyen de désactiver un lien est probablement de supprimer son attribut href, ce qui en fait un non-lien. Vous pouvez le faire de manière dynamique avec une liaison d'attribut conditionnelle href:

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

Ou, comme dans la réponse de Günter Zöchbauer, vous pouvez créer deux liens, l'un normal et l'autre désactivé, et utiliser *ngIf pour afficher l'un ou l'autre:

<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>

Voici quelques CSS pour que le lien ait l'air désactivé:

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

Pour [routerLink], vous pouvez utiliser:

Ajouter ce CSS devrait faire ce que vous voulez:

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

Cela devrait résoudre le problème mentionné par @MichelLiu dans les commentaires:

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

Une autre approche

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

Exemple de Plunker

31
Günter Zöchbauer

Je viens de trouver cette question et je voulais suggérer une autre approche.

Dans le balisage fourni par l'OP, il existe une liaison d'événement au clic. Cela me fait penser que les éléments sont utilisés comme "boutons". Si tel est le cas, ils pourraient être marqués en tant qu'éléments <button> et mis en forme comme des liens, si tel est le style que vous souhaitez. (Par exemple, Bootstrap a un style de bouton "lien" intégré, https://v4-alpha.getbootstrap.com/components/buttons/#examples )

Cela présente plusieurs avantages directs et indirects. Il vous permet de vous lier à la propriété disabled, qui, lorsqu'elle est définie, désactivera automatiquement les événements de souris et de clavier. Il vous permet d'attribuer un style à l'état désactivé en fonction de l'attribut disabled, vous évitant ainsi de manipuler également la classe de l'élément. C'est aussi mieux pour l'accessibilité.

Pour une bonne description de l'utilisation des boutons et des liens, voir Les liens ne sont pas des boutons. Les DIV et SPAN ne sont pas non plus

4
Van J. Wilson

Ma réponse pourrait être en retard pour ce post. Cela peut être réalisé par le biais de css en ligne dans la balise d'ancrage uniquement.

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

Considérant que isDisabled est une propriété de composant qui peut être true ou false.

Plunker pour cela: https://embed.plnkr.co/TOh8LM/

3
vineetk27
   .disabled{ pointer-events: none }

désactivera l'événement click, mais pas l'événement tab. Pour désactiver l'événement tab, vous pouvez définir tabindex sur -1 si l'indicateur de désactivation est true.

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

J'ai utilisé

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

dans ma balise d'ancrage afin qu'ils ne puissent pas passer à la balise d'ancrage en utilisant la touche tab pour utiliser la touche "entrée" et le pointeur lui-même, nous définissons "aucun" en fonction de la propriété "isEditedParaO

0
guest