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<HeaderComponent>;

  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