本地变量
若只需要在父组件的模板中调用子组件方法,可以给子组件添加一个本地变量名,在模板中使用该名称调用。
源码在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后才能使用,这也好理解,只有显示了以后,才能注入嘛。