0
339
VistasViewChild no está definido en angular 13
Estoy tratando de llamar a la vista secundaria de un componente secundario desde el elemento principal y no estoy definido en la consola.
ver la imagen también ver el incendio de la pila para el mismo
https://stackblitz.com/edit/angular-ivy-k4m2hp?file=src%2Fapp%2Fhello.component.ts
import { Component, Input, OnInit, ViewChild } from '@angular/core'; import { TestChildComponent } from './test-child/test-child.component'; @Component({ selector: 'hello', template: `<h1>this is Hello component {{name}}!</h1>`, styles: [`h1 { font-family: Lato; }`], }) export class HelloComponent { @Input() name: string; @ViewChild('TestChildComponent') testChildComponent: TestChildComponent ngOnInit() { console.log('calling ngOninit in hello component'); console.log('going to call test child instance this.TestChildComponent.ngOninit') console.log(this.testChildComponent); } }Por favor, ayuda a obtener el componente secundario.
este.testChildComponent
Para que pueda llamar a ngOnInit del niño del padre.
this.testChildComponent.ngOnInit()
2 Respuestas
Responde la pregunta0
Se puede acceder a la referencia del elemento ViewChild en el ciclo ngAfterViewInit() lo más pronto posible.
Angular doc dice que deberíamos usar el componente secundario inyectado por ViewChild en ngAfterViewInit. Pero a veces ni siquiera puedes obtenerlo en ngAfterViewInit. El motivo es que el componente secundario aún no se crea cuando se ejecuta el gancho AfterViewInit. Para tal caso, tendría que esperar más (usar un setTimeout funcionaría pero es una mala idea). Otra opción sería hacer que el hijo emita algo al padre, haciéndole saber que el hijo ha sido renderizado y luego el padre puede consultarlo.
Pero su caso es que el hermano HelloComponent quiere consultar al hermano TestChildComponent , no puede hacer eso. TestChildComponent simplemente no está dentro del alcance de HelloComponent . La solución más fácil sería consultar TestChildComponent desde el AppComponent principal.
También debe agregar #TestChildComponent para acceder a la ref.
<app-test-child #TestChildComponent childname="{{ name }}"></app-test-child>Ejemplo de trabajo: https://stackblitz.com/edit/angular-ivy-j5ceat?file=src%2Fapp%2Fapp.component.html
0
si configura su viewChild { static: true } podrá acceder a él en ngOnInit
pero en su muestra, el problema se debe a que testChildComponent es un elemento secundario de app.component y no de hello.component
<app-test-child childname="{{ name }}" #test></app-test-child>aplicación.componente.ts
import { Component, VERSION, ViewChild } from '@angular/core'; import { TestChildComponent } from './test-child/test-child.component'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { name = 'this is from app compoenent'; @ViewChild('test', { static: true }) testChildComponent: TestChildComponent; ngOnInit() { console.log('calling ngOninit in app component'); console.log(this.testChildComponent); } }Si desea acceder a testChildComponent desde hello.component, deberá enviarle el componente como entrada para la muestra
siguiendo una muestra funcional de acceso a testChildComponent
https://stackblitz.com/edit/angular-ivy-tvwukg?file=src%2Fapp%2Fapp.component.html