El decorador @ViewChild se utiliza para consultar un solo elemento DOM del árbol DOM y te permite manipularlo. Para seleccionar un elemento de la plantilla, se pueden utilizar tres parámetros diferentes.
- Selector: El selector del elemento a consultar. Puede ser un tipo de directiva o un nombre.
- Lee: Lea una muestra diferente de los elementos consultados.
- Estática: Esta es una de las nuevas características introducidas en Angular 8, e indica si se deben resolver los resultados de la consulta antes de que se ejecute la detección de cambios.
Veamos un ejemplo de cómo usar el decorador @ViewChild.
Primero, cree un nuevo componente distinto del componente de la aplicación utilizando el siguiente comando ng.
1Ng generar componente democomponente
Shell
democomponent.component.html
123<div.; Esto es {{ nombre del componente }} componente</div. html
Aquí hemos utilizado la variable de entrada local, que se declara dentro de la clase de componente para imprimir el valor procedente del componente padre.
Declare la variable @Input en un componente, como se indica a continuación.
1234567891011121314import{Componente,OnInit,Input}de"@angular/núcleo";@Componente({ selector: "app-democomponente", templateUrl:"./democomponente.componente.html", styleUrls:[". /democomponente.componente.css"]})exportclassDemocomponenteComponenteComponentimplementsOnInit{/// Para obtener el nombre del componente de la aplicación @Input() componentName:string;constructor(){}}tipografía
Hemos terminado con el componente de demostración. Ahora, usaremos nuestro componente infantil, que hemos creado previamente, y lo manipularemos.
app.component.html
123<app-democomponentcomponentName="DEMO"</app-democomponent;
html
Si te das cuenta, hemos usado una propiedad adicional junto con el selector de componentes para niños, que es componentName=DEMO.
app.component.ts
123456789101112131415161718import{Componente,ViewChild}de"@angular/core";import{DemocomponenteComponente}de"./democomponente/democomponente.componente";@Componente({ selector: "mi-app", templateUrl:"./app.component.html", styleUrls:[". /app.component.css"]})exportclassAppComponent{ name ="Angular";// Obteniendo la referencia @ViewChild(DemocomponentComponent,{estatic:false}) hola:DemocomponentComponent;ngAfterViewInit(){console.log("Hola ",this.hello.componentName);}}tipografía
Podemos acceder directamente a la propiedad de un componente infantil usando la variable «hola».
123ngAfterViewInit(){console.log("Hola ", este.hola.nombre del componente);}tipografía
Fíjate que hemos usado ganchos ngAfterViewInit(). ¿Por qué, se preguntarán? Cuando la aplicación se carga, el elemento hijo puede no estar cargado por completo, y si intentamos acceder al componente, vuelve indefinido. Para resolver esto, usamos el gancho lifecycle, que nos permite acceder a cualquier elemento después de que la vista se inicialice.
También podemos acceder a cualquier elemento específico usando @ViewChild en lugar de referenciar todo el componente, lo cual hemos hecho hasta ahora. Reemplaza el código con el siguiente código.
123456789101112131415161718import{Componente,VistaNiño,ElementoRef}de"@angular/núcleo";import{ComponenteDemocomponente}de"./democomponente/democomponente.componente";@Componente({ selector: "mi-app", templateUrl:"./app.componente.html", styleUrls:[". /app.component.css"]})exportclassAppComponent{ name ="Angular";// Obtención de la referencia del control del botón @ViewChild("miBotón",{estático:false}) myButton:ElementRef;ngAfterViewInit(){console.log("Hola ",este.miBotón.nativoElement);}}tipografía
Lo que hemos cambiado es que el elemento de control del botón es ahora el elemento que hemos usado en nuestro HTML.
app.component.html
123<div...;buttontype="button "#myButton...;My Button</button...;
html
Para acceder al elemento nativo, podemos usar ElementRef, que devuelve el elemento nativo HTML. Se puede acceder a él desde el componente de esta manera:
1@ViewChild("miBotón",{estático:falso}) myValue:ElementRef;tipografía
Y puede acceder al elemento nativo usando ngAfterViewInit(), así:
123ngAfterViewInit(){console.log("Hola ",this.myValue.nativeElement);}tipografía
La salida del ejemplo anterior se verá así:
Como puedes ver en la salida anterior en la consola, obtenemos la respuesta como un elemento nativo porque ElementRef devuelve el elemento nativo basado en la referencia tomada junto con @ViewChild.
Por lo tanto, podemos intentar cualquiera de las formas anteriores para acceder al niño o al elemento nativo desde la plantilla.