typescript - Pasar datos del padre al enésimo hijo en Angular 5

supongamos que tengo un componente padre que interactúa con su componente hijo así:

Si este es el caso, puedo pasar algunos datos al hijo usando la siguiente sintaxis:

padre.componente.ts

// imports..      
selector: "app-parent",
templateURL: "./parent.component.html",
// ...
export class ParentComponent{
public statement= "I am your father"!;
}

padre.componente.html

<div>
 <h1>
   My name is Darth Vader
 </h1>
</div>    
<app-child [luke] = "statement"></app-child> // child selector!

child.component.ts

// imports..      
selector: "app-child",
templateURL: `<h2>{{"Luke, " + luke}}</h2>`
// ...
export class TestComponent{
@Input() public luke;
}

El resultado debería ser:

¡Luke, yo soy tu padre!

Nada especial hasta ahora.

¿Y qué pasa si mi componente hijo contiene otro hijo y por lo tanto actúa como su padre?

child.component.html

<app-secondChild></app-secondChild> // selector of second.child.component.ts!

second.child.component.html

<app-thirdChild></app-thirdChild> // selector of third.child.component.ts!

tercer.hijo.componente.html

<app-fourthChild></app-fourthChild> // selector of fourth.child.component.ts!

Básicamente, quiero pasar datos del padre al último hijo para activar algún código HTML.

Espero que esto no se haya explicado de manera demasiado complicada.

Respuesta #1

Puedes transferir valor de padres a hijos usando 3 formas diferentes

1. Usando entrada en el archivo .html padre

   <app-child [user]="user"></app-child>
   

   y archivo child.ts

   export class ChildComponent implements OnInit{
      @Input() user: SocialUser;
   }
   

2. Usando Almacenamiento Simple, storage.service.ts

   public user: String = '';
   

   Ahora importa este servicio en el archivo module.ts y en parent.ts importa el servicio de almacenamiento

   constructor(public storageService: StorageService){}
   ngOnInit(){this.storageService.user = 'user_value';}
   

   En el archivo child.ts

   constructor(public storageService: StorageService){}
   ngOnInit(){console.log(this.storageService.user);}
   

3. Usando Observable en storage.service.ts

   public user: Subject<any> = new BehaviorSubject<any>(null);
   

   Ahora importa este servicio en el archivo module.ts y en parent.ts importa el servicio de almacenamiento

   constructor(public storageService: StorageService){}
   ngOnInit(){this.storageService.user.next('user_value')}
   

   En el archivo child.ts

   constructor(public storageService: StorageService){}
   
   ngOnInit(){
       this.storageService.user.subscribe(user=> {if(user) console.log(user)});
   }
   

Esta solución puede resolver tu problema.

Respuesta #2

Podrías pasar los datos del padre al hijo usando un parámetro de entrada hasta que el último hijo los reciba. Si los componentes intermedios no van a requerir estos datos, podrías tomar otro enfoque. Tengo un par de opciones:

1. Podrías usar una Clase de Servicio con una propiedad que contenga los datos que deben ser compartidos.

2. Podrías usar otros patrones que funcionen con un almacén de datos compartido, tal vez quieras echar un vistazo a Redux y ngrx store: https://github.com/ngrx/store