Tengo un componente A que tiene un contenido ng. Después de esto, tengo un componente B dentro del componente A. El componente B tiene un componente C en su plantilla.
plantilla del componente A:
<ng-content></ng-content>plantilla de componente B:
<componentC></componentC>plantilla de componente C:
<div> <span>test</span> <div>En mi html tengo esta solución final:
<componentA> <componentB></componentB> </componentA>Usaría un viewChild dentro del componente A para encontrar el componente C que está dentro del componente B pero devuelve indefinido
@ViewChild(ComponentC) componentC: ComponentC¿Cómo puedo solucionar este problema?
En servicio:
private sharedValue = new BehaviorSubject('Initial value') currentSharedValue = this.sharedValue.asObservable() changeSharedValue(newValue: string) { this.sharedValue.next(newValue) }Si no desea establecer un valor inicial, puede usar un Asunto regular y si desea realizar un seguimiento del historial, un ReplaySubject.
Datos de cambio de componente:
constructor( private dataService: DataService ) { } changeSharedData(): void { this.dataService.changeSharedValue('New Shared Data') }Componente leyendo datos compartidos:
value = 'Old Value' subscription!: Subscription; constructor( private dataService: DataService ) { } ngOnInit() { this.subscription = this.dataService.currentSharedValue.subscribe(newValue => { this.value = newValue }) } ngOnDestroy() { this.subscription.unsubscribe() }Puede hacerlo de diferentes maneras, ¡deje que el componente padre apunte al hijo!
Entonces, suponiendo que ComponentA es padre de ComponentB dentro de su HTML
<ComponentA><ComponentB></ComponentB></ComponentA>Entonces, en ComponentA ts define una variable pública de ComponentB
myComponent: ComponentB;En el constructor de ComponentB, inyecte ComponentA
constructor(parent:ComponentA) { parent.myComponent = this; }
ahora el ComponentA principal puede acceder al componente B secundario