Question

如何访问（调用某些方法）以下两个子组件的子组件：某个父（容器）组件的子组件；也就是说，让ParentCmp在模板中包含两个子组件（它们的选择器和模板引用），并在这两个子组件中调用LoadingPanels的某些方法：

ParentCmp.html： ....

<child1 #child1></child1>
<child2 #child2></child2>

ParentCmp.ts：

  @ViewChild('child1', read: ComponentRef<child1Cmp>) child1Cmp: ComponentRef<InvitationsBarComponent>;
  @ViewChild('child2') meetingsBarCmp: Child2Cmp;
...

child1Cmp.instance.loadingPnl.load(() => {....});
child2Cmp.loadingPnl.load(() => {....});

？

Answer 1

尝试一下：

import { Component, ViewChild } from '@angular/core';
import { Child1Component } from './child1/child1.component';
import { Child2Component } from './child2/child2.component';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  @ViewChild(Child1Component) child1: Child1Component;
  @ViewChild(Child2Component) child2: Child2Component;

  ngAfterViewInit() {
    this.child1.child1Method();
    this.child2.child2Method();
  }

}

在您的模板中：

<child1></child1>

<child2></child2>

PS：，因为可以完全加载视图，所以您可以确保访问ngAfterViewInit中的子组件实例。

这是您推荐的Working Sample StackBlitz。

角度6：访问子组件的子组件（来自父组件）

1 个答案: