Cuando queremos pasar los datos del componente padre al componente hijo, utilizamos la unión de entrada con decoraciones @Input.
Consideremos un ejemplo en el que PersonChildComponent tiene dos propiedades de entrada con decoraciones @Input. Como podemos ver en el siguiente ejemplo, debemos importar la entrada de la biblioteca «@angular/núcleo».
Nombre de archivo: personchild.component.ts
123456789101112131415importar{Componente,Entrada}de$0027@angular/núcleo$0027;importar{Persona}de$0027./Persona$0027; @Componente({ selector:$0027app-person-child$0027, plantilla:` ` <h3>{{person. nombre}} dice:``Persona.h3}; ``Persona.nombre}}, bienvenido a , {{{nombre.maestro}}.</p}; `})exportclasePersonaNiñoComponente{ @Ingreso() persona:Persona; @Ingreso($0027maestro$0027) nombre.maestro:cadena;}tipografía
Podemos usar el alias con la unión @Input. Como vemos en el ejemplo anterior, masterName se aliena con el master.
Interceptando los cambios de la propiedad de entrada con un Setter y ngOnChanges()
Interceptar la propiedad de entrada ayuda a actuar sobre un valor del padre.
Cambios con el setter:
Consideremos un ejemplo en el que estamos estableciendo el nombre de la persona de la propiedad de entrada en el hijo PersonChildComponent que recorta el espacio en blanco de un nombre y reemplaza un valor vacío con el texto por defecto.
El componente Persona-Padre que se muestra a continuación muestra las variaciones del nombre de la persona, incluyendo un nombre de persona con todos los espacios.
Nombre de archivo: personchild.component.ts
12345678910111213141516importar{Componente,Entrada}de$0027@angular/núcleo$0027; @Componente({ selector:$0027app-personname-child$0027, plantilla:$0027<h3>"{{{{nombre de la persona}}"</h3 ];$0027})exportclassPersonChildComponente{privado _nombre de la persona =$0027$0027; @Input()setnombre de la persona(nombre de la persona:cadena){esto. _personname=(personname && personname.trim())||$0027no personname set$0027;$0027;}getpersonname():string{returnthis._personname;}}tipografía
Nombre del archivo: personparent.component.ts
12345678910111213importación{Componente}de$0027@angular/núcleo$0027; @Componente({ selector:$0027app-person-parent$0027, plantilla:` ` <h2>Maestro tienen {{nombres de personas. longitud}} nombres de persona</h2> <app-person-child *ngFor="let personname of personnames" [nombre de persona]="nombre de persona"</app-person-child; `})exportclassPersonParentComponent{// Muestra $0027Yallaling$0027, $0027<no person set >$0027, $0027Goudar$0027 nombres de persona =[$0027Yallaling$0027,$0027 $0027,$0027 Goudar $0027];}tipografía
Cambios con ngOnChanges():
El método ngOnChanges() de la interfaz de gancho del ciclo de vida OnChanges detecta y actúa sobre los cambios en los valores de las propiedades de entrada. Puede que prefiera este enfoque al que establece las propiedades cuando observa múltiples propiedades de entrada que interactúan.
Consideremos un ejemplo en el que tenemos MinmaxChildComponent que detecta los cambios en las propiedades de entrada mínima y máxima y compone un mensaje de registro informando de estos cambios.
Nombre de archivo: minmaxchild.component.ts
1234567891011121314151617181920212223242526272829303132import{Componente,Entrada,EnCambio,CambioSimple}de$0027@angular/núcleo$0027;@Componente({ selector:$0027app-minmax-child$0027, plantilla:` ` <h3>Valor mínimo: {{{mínimo}} Valor máximo: {{{{máximo}}}</h3}; <h4};Registro de cambios:</h4}; <ultimo; *ngFor="let change of changeLog"{{{{{cambio}}</li> </ul}; `})exportclassMinmaxChildComponentimentsOnChanges{ @Input() minimum: número; @Input() máximo:número; changeLog:string[]=[];ngOnChanges(changes:{[propKey:string]:SimpleChange}){let log:string[]=[];for(let propName in changes){let changedProp = changes[propName];let to =JSON. stringify(changedProp.currentValue);if(changedProp.isFirstChange()){ log.push(`Valor inicial de ${propName} ajustado a ${to}`);}else{letfrom=JSON. stringify(changedProp.previousValue); log.push(`${propName} cambiado de ${from} a ${to}`);}}this.changeLog.push(log.join($0027, $0027));}}tipografía
El componente MinmaxChild suministra los valores mínimo y máximo y vincula los botones a los métodos que los cambian.
Nombre de archivo: minmaxparent.component.ts
123456789101112131415161718192021222324import{Componente}de$0027@angular/core$0027;@Componente({ selector:$0027app-minmax-parent$0027, plantilla: ``Código fuente minmax</h2;``botón (clic)="changedMin()"``Nuevo valor mínimo</botón /button > <app-minmax-child [mayor]="mayor" [menor]="menor"</app-minmax-child ]; `})exportclassMinmaxParentComponent{ minimum =1; maximum =23;changedMin(){this. mínimo++;}cambiadoMáx(){esto.máximo++;esto.mínimo=0;}}tipografía
Cuando hacemos clic en el botón «Nuevo valor mínimo», el valor mínimo se incrementará y cuando hacemos clic en el botón «Nuevo valor máximo», el valor máximo se incrementará. Y podemos ver que los valores cambiados se registran en el registro de cambios.