Ahora sabes cómo hacer la directiva personalizada y cómo usarla en una etiqueta. Ahora voy a explicarte cómo puedes usar esa etiqueta en tu directiva.
Así que aquí está la nueva clase que le ayudará a dar una referencia al elemento. El nombre de la clase es ElementRef, que se importa de @angular/core. Esto te dará la referencia de ese elemento, y cualquier cosa que hagas que cambie dinámicamente, se reflejará en ese elemento.
Este recorte te ayudará a usar el ElementRef para cambiar el color del texto del elemento.
demo.directive.ts
1234567891011121314import{Directiva,ElementRef,OnInit}de$0027@angular/núcleo$0027;@Directiva({ selector:$0027[appDemo]$0027})exportclassDemoDirectivaimplementosOnInit{constructor(elemento privado:ElementRef){}ngOnInit(){este.elemento.nativoElement.style.color=$0027red$0027}}ts
En el código anterior, estoy obteniendo la referencia del elemento en el constructor. ElementRef es también una clase de envoltura allí; necesitamos usar NativeElement para realizar los cambios en el elemento.
Ahora se ha convertido en nada más que un JavaScript. Si estás familiarizado con la manipulación DOM, puedes usar tu experiencia de manipulación DOM en este momento.
En JavaScript, también necesitamos obtener la referencia del elemento por clase, etiqueta o nombre de identificación.
app.component.html
1<divappDemo>;Custom Directive Demo</div;
html
Salida:
Puedes ver que el resultado es exactamente el mismo que esperábamos.
Si quieres usar un oyente de eventos también, usa @HostListener. Funcionará como addEventListener en JavaScript. Si estás familiarizado con addEventListener entonces toma menos tiempo para entenderlo.
123456789101112131415161718import{Directiva,ElementRef,OnInit,HostListener}de$0027@angular/núcleo$0027;@Directiva({ selector:$0027[appDemo]$0027})exportclassDemoDirectivaimplementosOnInit{constructor(elemento privado:ElementRef){}ngOnInit(){este.elemento.nativoElement.style.color=$0027red$0027} @HostListener($0027click$0027)onClick(){console.log("this item is being clicked")}}ts
En el código de arriba, puedes ver que he añadido una función de clic. Después del clic del elemento div de app.component.htmlin que hemos añadido nuestra propia directiva, mostrará un texto en la consola.
Salida:
1este artículo está siendo pulsado demo.directive.ts:15
consola
Puedes ver que el texto de salida se ha llenado en la consola.