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()并订阅更改。

ViewChild：错误TypeError：“ this.child未定义”

2 个答案: