ViewChild: ERROR TypeError: "this.child is undefined"

ViewChild: ERROR TypeError: "this.child is undefined"

在Angular7 中,我有一个组件有一个子组件。但是,我想获取该子组件的副本以在父组件中使用,以调用其函数或其他任何内容。

子组件:

@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

可以帮我解决这个问题,

谢谢

我想这是因为 child 组件还没有渲染,你可以使用 ngAfterContentInit.

这个生命周期挂钩只应在绘制 child 后触发,然后您应该能够获得参考。

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

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

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

}

如果这对您有帮助,请告诉我。

为确保您 child 已加载,请使用 ViewChildren() 并订阅更改。