Angular2父组件类调用子组件方法

本地变量

若只需要在父组件的模板中调用子组件方法，可以给子组件添加一个本地变量名，在模板中使用该名称调用。
父组件模板增加子组件的本地变量名(#name)和调用

<app-header #header [title]="title" name="{{name}}" (checkEmitter)="onCheckedChange($event)" >app-header>
<button (click)="header.toggle()">调用子组件方法button>

ViewChild和ViewChildren

用上面的别名方法，只能在父组件的模板中调用，而不能在父组件类中访问子组件，有些局限。

如果需要在父组件类中访问或调用子组件方法，需要使用ViewChild、ViewChildren将子组件注入到父组件中。

父组件模板：

<app-header #header [title]="title" name="{{name}}" (checkEmitter)="onCheckedChange($event)" >app-header>
<app-header #header2 [title]="title2" name="{{name}}" (checkEmitter)="onCheckedChange($event)" >app-header>
<button (click)="header.toggle()">通过本地变量调用子组件方法button>
<button (click)="headerToggle()">通过ViewChild调用子组件方法button>

父组件类:

export class AppComponent implements AfterViewInit{
  title="首页";
  title2="首页2";
  name="姓名111";
  // 获取模板内的第一个指定组件
  @ViewChild(HeaderComponent)
  private header1:HeaderComponent;

  // 如果有多个相同的标签，可以用本地变量名来选择
  @ViewChild('header2')
  private header2:HeaderComponent;
  // 也可以用ViewChildren 获取所有同类型子组件
  @ViewChildren(HeaderComponent)
  private headers: QueryList;

  ngAfterViewInit() {
    console.log(this.header1.isChecked);
    console.log(this.header2.isChecked);
    this.headers.forEach((child) => { console.log(child.title) });

  }
  onCheckedChange(isChecked:boolean) {
    console.log("checkbox选中状态："+isChecked);
  }

  headerToggle() {
    this.header1.toggle();
  }
}

注入的属性只有在ngAfterViewInit后才能使用，这也好理解，只有显示了以后，才能注入嘛。

原文链接：https://www.pocketdigi.com/20170204/1556.html