Angulaire: caractéristiques non évidentes des sélecteurs de directives

Si vous avez déjà créé des directives angulaires, vous avez probablement utilisé une construction utilisant des crochets comme sélecteur: ([]) . Une telle approche, bien qu'elle soit le plus souvent appliquée, n'est pas la seule possible. En fait, les sélecteurs utilisés dans les directives donnent au programmeur un large champ de créativité. Afin de démontrer cette idée en action, le matériel, dont nous publions la traduction aujourd'hui, discute de la méthodologie pour créer une directive conçue pour fonctionner avec des liens externes qui sont dans le modèle. En particulier, nous parlerons de la façon dont vous pouvez trouver des éléments HTML ordinaires et, si nécessaire, en excluez certains de la sélection en utilisant la :not pseudoclass.

Directive NgForm

Afin de considérer un exemple de sélecteur complexe, jetez un œil à la directive ngForm :

 @Directive({ selector: 'form:not([ngNoForm]):not([formGroup]),ngForm,ng-form,[ngForm]', }) 

Ici, il convient de prêter attention aux éléments suivants:

• La directive peut être conçue pour plusieurs sélecteurs, qui peuvent être répertoriés avec une virgule.
• Ici, vous pouvez mélanger des éléments cibles HTML (comme <form> ) avec des attributs HTML (comme ngForm ).
• Pour exclure certains éléments de la sélection, vous pouvez utiliser la :not pseudo- :not .

Création d'une directive pour travailler avec des liens externes

Par lien externe, nous entendons la balise <a> , qui n'a pas de directive routerLink . Compte tenu de ce que nous avons découvert en analysant l'exemple précédent, le sélecteur correspondant peut être décrit comme suit:

 @Directive({ selector: 'a:not([routerLink])', }) 

La beauté de ce sélecteur est que nous n'avons pas besoin de créer un nom d'attribut pour quelque chose qui peut être décrit comme l'opposé d'une entité.

Nous pouvons, pour mettre en évidence des liens externes, utiliser quelque chose comme une directive avec le nom externalLink , mais cela est complètement inutile, car cette approche se traduit par une duplication des mécanismes existants. De plus, il est facile d'oublier d'ajouter une directive similaire à certains liens externes. La force de notre méthode est que, grâce à une seule ligne, nous pouvons accéder à tous les liens externes.

Les résultats de l'application de la directive aux liens externes devraient ressembler à ceci:

• Le lien devrait s'ouvrir dans une fenêtre séparée.
• L' rel doit être ajouté au lien, ce qui améliorera les performances et augmentera la sécurité de la solution.

Ces deux objectifs sont réalisables grâce à l'utilisation de @HostBinding() :

 @Directive({ selector: 'a:not([routerLink])' }) export class ExternalLinkDirective { @HostBinding('rel') @Input() rel = 'noopener'; @HostBinding('target') @Input() target = '_blank'; } 

Veuillez noter qu'ici, entre autres, nous avons décoré les propriétés à l'aide du décorateur @Input() , ce qui, si nécessaire, ouvre des possibilités de redéfinition.

Une autre implémentation valide d'une telle solution peut être d'utiliser le décorateur @Attribute() . Cette approche donnera une légère augmentation des performances, car, contrairement au décorateur @Input() , lorsque vous utilisez @Attribute() valeurs des propriétés correspondantes sont calculées une seule fois, c'est-à-dire que les propriétés rel et target ne sont pas constamment vérifiées dans le cycle de vérification des modifications.

Des détails sur cette technique peuvent être trouvés ici .

Directive sur les tests

Créons un simple bloc de navigation contenant des liens menant à des ressources externes:

 <nav> <a href="https://google.com">Google</a> <a href="https://bing.com">Bing</a> <a href="https://forbes.com">Forbes</a> </nav> 

Si, à l'aide des outils du développeur Chrome, vous voyez le code HTML correspondant, vous pouvez voir ce qui suit:


Code HTML du bloc de navigation après application de la directive

C'est exactement ce dont nous avons besoin. La directive fonctionne sans avoir besoin de sélecteurs d'attributs supplémentaires.

Résumé

De ce matériel, vous avez appris que lorsque vous travaillez avec des directives angulaires, il n'est pas nécessaire d'utiliser des sélecteurs d'attributs. Ici, nous avons d'abord examiné la directive ngForm , puis utilisé les connaissances que nous avons acquises pour créer notre propre directive conçue pour fonctionner avec des liens externes. Nous espérons que cette technique vous sera utile.

Chers lecteurs! Si vous connaissez des techniques non évidentes pour développer des projets Web à l'aide d'Angular, veuillez nous en parler.