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

Je travaille sur une application Angular2 et je dois afficher – mais disable un élément HTML . Quelle est la bonne façon de faire cela?

Actualisé

S’il vous plaît noter le *ngFor , cela empêcherait l’option d’utiliser *ngIf et ne pas rendre le tout .

  {{ link.name }}  

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

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

Je dois empêcher que l’élément soit cliquable, pas seulement apparaître avec le CSS . Je supposais que je devais potentiellement lier l’atsortingbut [disabled] au début, mais cela est incorrect car l’élément ancre n’a pas de propriété disabled .

J’ai regardé et envisagé d’utiliser les pointer-events: none mais cela empêche mon style de cursor: not-allowed de travailler – et cela fait partie de l’exigence.

Spécifier pointer-events: none en CSS désactive la saisie de la souris mais ne désactive pas la saisie au clavier. Par exemple, l’utilisateur peut toujours cliquer sur le lien et cliquer dessus en appuyant sur la touche Entrée ou (sous Windows) sur la touche ≣ Menu . Vous pouvez désactiver des frappes de touches spécifiques en interceptant l’événement keydown , mais cela risque de perturber les utilisateurs qui utilisent des technologies d’assistance.

Le meilleur moyen de désactiver un lien est probablement de supprimer son atsortingbut href , ce qui en fait un non-lien. Vous pouvez le faire dynamicment avec une liaison conditionnelle d’atsortingbut href :

  {{ link.name }}  

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:

  {{ link.name }} {{ link.name }}  

Voici quelques CSS pour rendre le lien désactivé:

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

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:

 {{ link.name }} 

Une autre approche

 {{ link.name }} {{ link.name }} 

Exemple Plunker

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

Dans le balisage fourni par l’OP, il existe une liaison d’événement de clic. Cela me fait penser que les éléments sont utilisés comme “boutons”. Si tel est le cas, ils peuvent être marqués comme des éléments et être stylés comme des liens, si tel est votre désir. (Par exemple, Bootstrap a un style de bouton “link” intégré, https://v4-alpha.getbootstrap.com/components/buttons/#examples )

Cela a plusieurs avantages directs et indirects. Il vous permet de lier la propriété disabled , qui, une fois définie, désactivera automatiquement les événements de souris et de clavier. Il vous permet de styliser l’état désactivé en fonction de l’atsortingbut désactivé, de sorte que vous n’avez pas à manipuler également la classe de l’élément. C’est aussi mieux pour l’accessibilité.

Pour plus d’informations sur l’utilisation des boutons et l’utilisation des liens, voir Les liens ne sont pas des boutons. Les DIV et les SPAN ne sont pas non plus

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.

click-label

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

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

  .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 le tabindex sur -1 si l’indicateur de désactivation est true.

 
  • Menu Item
  • 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 l’onglet pour utiliser la clé “enter” et aussi le pointeur lui-même que nous définissons sur “none” en fonction de la propriété “isEditedParaO rder”

    Vous pouvez essayer ceci