0%

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

本地变量

若只需要在父组件的模板中调用子组件方法,可以给子组件添加一个本地变量名,在模板中使用该名称调用。
源码在Angular2 组件间通过@Input @Output通讯 基础上修改,父组件模板增加子组件的本地变量名(#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后才能使用,这也好理解,只有显示了以后,才能注入嘛。