Pasar datos a un componente anidado con @Input

Ahora nos sumergiremos en la parte de la codificación para darles una mejor idea de cómo usar @Input().

Primero, vamos a hacer dos componentes. Abre tu cmd , ve a la ruta de la carpeta del proyecto, y escribe el comando de abajo.

12ng g c componentes/padre --skipTests=trueng g c componentes/niño --skipTests=true

consola

Hemos creado con éxito los componentes. Ahora es el momento de usar el decorador @Input().

app.component.html

1<app-parent;
tipografía

En app.component.html, llamamos al componente padre.

 parent.component.html 

1<app-niño[parentData]="data"[data]="data"</app-niño;
html

En el componente padre, llamamos al componente hijo. Pero puedes ver algunos atributos adicionales en el componente. Esto se debe a que vamos a usar @Input() en el componente.

El decorador @Input() va a decirle al componente que este campo viene del componente padre. Notarán que escribimos parentData y data, que es un atributo para app-child tal como está bajo el par de corchetes($0027[]$0027). Esto se debe a que tenemos que establecer los datos dinámicos en el atributo parentData y data, que vendrá del archivo de clase del componente. Así que estamos pasando los datos que son instanciados e inicializados en el componente padre. Puedes ver esto en el siguiente código:

parent.component.ts
123456789101112131415import{Componente,OnInit}de"@angular/núcleo";@Componente({ selector: "app-parent", templateUrl:"./parent.component.html", styleUrls:[". /parent.component.scss"]})exportclassParentComponentimplementsOnInit{ data:string;constructor(){}ngOnInit(){this.data="Hii from parent";}}
tipografía

Como pueden ver en el método ngInInit(), fijamos el valor de los datos, que se obtendrán en el archivo HTML, y fijamos los ParentData y los datos.

Ya hemos terminado con el código del lado de los padres. No se necesita más código en el lado de los padres para enviar los datos de los padres a los hijos. Ahora veamos el código en el lado de los hijos.

child.component.html
12{{{{{datos de los padres}}<br/{{{{nombre modificado}}
html

En child.component.html, unimos los datos de child.component.ts para imprimirlos en el child component.

child.component.ts
123456789101112131415161718import{Componente,OnInit,Input}de"@angular/núcleo";@Componente({ selector: "app-child", templateUrl:"./child.component.html", styleUrls:["./child.component. scss"]})exportclassChildComponentimplementsOnInit{ @Input() parentData; @Input("data") modifiedName;constructor(){}ngOnInit(){console.log("This is the parent data",this.parentData);console.log("This is the parent data",this.modifiedName);}}
tipografía

Esto parece magia, y tenemos que prestar más atención a esta parte del código.

Usamos @Input() decorador para obtener los datos de padre. Se preguntará por qué hemos escrito dos sintaxis diferentes para el @Input(), es decir, @Input() y @Input("datos"). Esto se debe a que si tenemos que usar el mismo nombre en la clase hija, es decir, igual que el nombre de un atributo, tenemos que escribirlo en la etiqueta app-child en el archivo parent.component.html para no tener que pasar nada en el @Input(), que por defecto buscará el nombre que coincida con el nombre de la variable del componente hijo.

Pero si tenemos que usar un nombre diferente para un atributo y un nombre diferente para una variable, entonces tenemos que pasar el nombre del atributo en el @Input(), que es un dato en nuestro caso.

Nuestra salida se vería algo así:

Recuerda, dije que el campo @Input() obtiene los datos antes de que se llame al método ngOnInit(). Por lo tanto, estoy imprimiendo los datos en la consola, que se verá como el recorte de abajo.