Suponga que tiene un componente principal A y dentro de él tiene alguna variable x . Le gustaría pasar esta variable al componente secundario B. ¡Fácil! Simplemente use la anotación @Input y llámelo un día. Pero, ¿y si B tiene otro componente secundario C? ¿Cómo pasaríamos x de A a C? Intenté usar el mismo enfoque para pasarlo de B a C, pero solo pasa el valor undefined .
Puede usar un archivo de servicio común que es el archivo data.service.ts en este caso. Este servicio lo inyectarán tanto el padre como el nieto. Cuando el componente A, que es el padre principal aquí, quiere enviar datos, llamará al método deliverMsg del archivo de servicio de datos. El componente C, que es nieto, escuchará este cambio inyectando el mismo servicio de datos.
servicio.de.datos.ts
// relevant imports @Injectable() export class DataService { private message = new BehaviorSubject('default message'); portMessage = this.message.asObservable(); constructor() { } deliverMsg(message: string) { this.message.next(message) } }padre.componente.ts
//all relevant imports @Component({ selector: 'app-parent-a', template: 'html file url', styleUrls: ['./sibling.component.css'] }) export class ParentComponent implements OnInit { message:string; constructor(private data: DataService) { } ngOnInit() { } newMessage() { this.data.deliverMsg("Hello from Grand Parent") } }nieto.componente.ts
// all relevant imports @Component({ selector: 'app-sibling', template: 'template', styleUrls: ['./sibling.component.css'] }) export class SiblingComponent implements OnInit { message:string; constructor(private data: DataService) { } ngOnInit() { this.data.portMessage.subscribe(message => this.message = message) } }Alternativamente, también puede usar NgRx