Usaremos un componente anidado para pasar datos a y desde un componente infantil y realizar una acción basada en varias instrucciones.
Para pasar los datos del padre y obtener el valor en el componente anidado, usamos el decorador @Input, una especie de directiva de atributos usada para unir la expresión a la directiva.
El decorador @Input se utiliza para obtener los valores de entrada del componente, y el proceso se basa en la instrucción proporcionada.
Veamos un ejemplo sencillo en el que usaremos un valor de matriz, lo pasaremos al componente anidado, y al final, lo obtendremos usando el decorador @Input.
Para ello, vamos a crear un nuevo componente llamado lista de empleados usando el siguiente comando npm.
1Ng generar componente lista de empleados
Shell
Después de crear el componente, abra ese archivo y pegue las siguientes líneas de código fuente.
Employeelist.component.html
12345678<p> employeelist works!html
Aquí en este archivo, tenemos un simple div junto con los elementos de la lista sin ordenar, que obtendremos del componente parentcomponente a través de @Decorador de entrada, por lo que tenemos que declararlo en el componente hijo de esta manera:
Componente.de.la.lista.de.empleados.
12345678910111213141516171819import{Componente,OnInit,Input}de$0027@angular/core$0027;@Componente({ selector:$0027app-employeelist$0027, templateUrl:$0027./employeelist.component. html$0027, styleUrls:[$0027./employeelist.component.css$0027]})exportclassEmployeelistComponentimentsOnInit{// Decorador de entrada @Input() employeelist :string[];constructor(){}ngOnInit(){}}tipografía
Como vemos, tenemos el archivo completo del componente donde hemos importado el decorador @Input.
1import{Componente,OnInit,Input}de$0027@angular/core$0027;tipografía
Entonces podemos usarlo en el componente.
123// Decorador de entrada @Input() employeelist :string[];tipografía
La lista de empleados es una variable que usaremos en el archivo de la plantilla para obtener los datos y bajarlos.
Ya hemos terminado con el componente anidado de la lista de empleados, y ahora es el momento de pasar los datos reales del componente padre.
Para ello, abre app.component.ts y el código fuente tendrá este aspecto:
1234567891011121314151617181920212223import{Componente}de$0027@angular/núcleo$0027;@Componente({ selector:$0027mi-app$0027, templateUrl:$0027./app.component.html$0027, styleUrls:[$0027./app.component. css$0027]})exportclassAppComponent{ employeelist =[$0027Test Employee 1$0027,$0027Test Employee 2$0027,$0027Test Employee 3$0027,$0027Test Employee 4$0027,$0027Test Employee 5$0027];ngOnInit(){console.log(this.employeelist)}}tipografía
En este componente padre, hemos declarado y asignado los valores al mismo, que es la variable simple que vamos a enviar al componente hijo.
Ahora abre el archivo app.component.html y pega las siguientes líneas de código fuente.:
123<app-employeelist[employeelist]="employeelist" htmlEn este archivo, hemos utilizado el selector del componente anidado, app-employeelist, de modo que el contenido del componente anidado se renderizará, pero junto con el selector, también hemos utilizado atributos adicionales:
1[employeelist]="employeelist"html
En este caso, el nombre del atributo y su valor son los mismos, pero no es necesario hacerlo.
Puedes confundirte porque he usado [ ] junto con el atributo, pero esto es sólo un tipo de vinculación de atributos. Cada vez que queremos unir el atributo con el valor dinámico, la unión de atributos es útil.
Ahora hemos terminado con nuestro ejemplo, que muestra una lista de elementos de la matriz en el componente padre y la pasa al componente hijo, donde hemos utilizado una lista no ordenada para mostrar la lista de elementos.
Cuando ejecutamos el ejemplo anterior, obtenemos una salida como esta:
Como pueden ver en la imagen de arriba, hemos renderizado la lista de artículos de la lista de empleados de la matriz, que viene del componente padre.
Así es como podemos pasar los datos o la entrada del padre al componente anidado a través del decorador @Input, y tenemos muchas opciones.