ViewChild: ОШИБКА TypeError: "this.child не определено"

Question

В Angular 7 у меня есть компонент, имеющий дочерний компонент. Однако я хочу получить копию этого дочернего компонента для использования в родительском компоненте, для вызова его функций или чего-либо еще.

дочерний компонент:

@Component({
  selector: 'app-child',
  template: `
    <h1>child</h1>
  `,
})
export class ChildComponent {
       name = "child";
       constructor(){}
}

Родительский компонент:

import { ChildComponent } from  './table/child.component';

@Component({
  selector: 'app-parent',
  template: `
    <h1>parent</h1>
    <app-child></app-child>
  `,
})
export class  ParentComponent implements AfterViewInit, OnInit{
  @ViewChild(ChildComponent) child: ChildComponent;

  ngAfterViewInit(){
   console.log(' ngAfterViewInit() : ', this.child.name);
  }

}

Я на самом деле использую шаблон CoreUi https://github.com/coreui/coreui-free-angular-admin-template,, этот шаблон отличается, потому что для каждого компонента должен быть свой (модуль и маршрут).

Дочерний компонент: src/App/views/test/table/child.component.ts

Родительский компонент: src/App/views/test/parent.component.ts

может помочь мне решить эту проблему,

Спасибо

Answer 1

Я думаю, это потому, что дочерний компонент еще не отрендерен, вы можете использовать ngAfterContentInit .

Этот хук жизненного цикла должен запускаться только после отрисовки дочернего элемента.тогда сможете получить ссылку.

import { ChildComponent } from  './table/child.component';

export class  ParentComponent implements ngAfterContentInit, OnInit{
  @ViewChild(ChildComponent) child: ChildComponent;

   ngAfterContentInit(){
   console.log(' ngAfterContentInit() : ', this.child.name);
  }

}

Дайте мне знать, если это поможет.

Answer 2

Чтобы быть уверенным, что ваш ребенок был загружен, используйте ViewChildren() и подпишитесь на изменения.