Saltar al contenido

Comprensión del propósito de los componentes anidados

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.

Comprensión del propósito de los componentes anidados
Comprensión del propósito de los componentes anidados

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"
html

En 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.