Angular: características no obvias de los selectores de directivas

Si alguna vez ha creado directivas angulares, entonces probablemente haya usado una construcción que usa corchetes como selector: ([]) . Tal enfoque, aunque se aplica con mayor frecuencia, no es el único posible. De hecho, los selectores utilizados en las directivas le dan al programador un amplio margen para la creatividad. Para demostrar esta idea en acción, el material, cuya traducción publicamos hoy, discute la metodología para crear una directiva diseñada para trabajar con enlaces externos que están en la plantilla. En particular, hablaremos sobre cómo puede encontrar elementos HTML normales y, si es necesario, excluir algunos de ellos de la selección utilizando :not pseudoclase.

Directiva NgForm

Para considerar un ejemplo de un selector complejo, eche un vistazo a la directiva ngForm :

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

Aquí vale la pena prestar atención a lo siguiente:

• La directiva se puede diseñar para múltiples selectores, que se pueden enumerar con una coma.
• Aquí puede mezclar elementos de destino HTML (como <form> ) con atributos HTML (como ngForm ).
• Para excluir algunos elementos de la selección, puede usar :not pseudo- :not .

Crear una directiva para trabajar con enlaces externos

Por enlace externo nos referimos a la etiqueta <a> , que no tiene una directiva routerLink . Considerando lo que descubrimos al analizar el ejemplo anterior, el selector correspondiente se puede describir de la siguiente manera:

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

La belleza de este selector es que no necesitamos crear un nombre de atributo para algo que pueda describirse mejor como lo contrario de alguna entidad.

Podemos, para resaltar enlaces externos, usar algo así como una directiva con el nombre externalLink , pero esto es completamente innecesario, ya que este enfoque se traduce en la duplicación de los mecanismos existentes. Además, es fácil olvidar agregar una directiva similar a algunos enlaces externos. La fortaleza de nuestro método es que, gracias a una línea, podemos acceder a todos los enlaces externos.

Los resultados de aplicar la directiva a enlaces externos deberían verse así:

• El enlace debe abrirse en una ventana separada.
• El atributo rel debe agregarse al enlace, lo que mejorará el rendimiento y aumentará la seguridad de la solución.

Ambos objetivos se pueden lograr mediante el uso de @HostBinding() :

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

Tenga en cuenta que aquí, entre otras cosas, decoramos las propiedades usando el decorador @Input() , que, si es necesario, abre posibilidades para la redefinición.

Otra implementación válida de tal solución puede ser usar el decorador @Attribute() . Este enfoque dará un ligero aumento en el rendimiento, porque, a diferencia del decorador @Input() , cuando se usa @Attribute() valores de las propiedades correspondientes se calculan solo una vez, es decir, las propiedades rel y target no se verifican constantemente en el ciclo de verificación de cambios.

Los detalles sobre esta técnica se pueden encontrar aquí .

Directiva de prueba

Creemos un bloque de navegación simple que contenga enlaces que conduzcan a recursos externos:

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

Si, usando las herramientas del desarrollador de Chrome, ve el código HTML correspondiente, puede ver lo siguiente:


Código HTML del bloque de navegación después de aplicar la directiva

Esto es exactamente lo que necesitamos. La directiva funciona sin la necesidad de selectores de atributos adicionales.

Resumen

De este material, aprendió que cuando se trabaja con directivas angulares, no es necesario utilizar selectores de atributos. Aquí examinamos primero la directiva ngForm , y luego usamos el conocimiento que obtuvimos para crear nuestra propia directiva diseñada para trabajar con enlaces externos. Esperamos que encuentre útil esta técnica.

Estimados lectores! Si conoce alguna técnica no obvia para desarrollar proyectos web utilizando Angular, cuéntenos sobre ellas.