本地变量
若只需要在父组件的模板中调用子组件方法,可以给子组件添加一个本地变量名,在模板中使用该名称调用。
父组件模板增加子组件的本地变量名(#name)和调用
调用子组件方法
ViewChild和ViewChildren
用上面的别名方法,只能在父组件的模板中调用,而不能在父组件类中访问子组件,有些局限。
如果需要在父组件类中访问或调用子组件方法,需要使用ViewChild、ViewChildren将子组件注入到父组件中。
父组件模板:
通过本地变量调用子组件方法通过ViewChild调用子组件方法
父组件类:
exportclassAppComponentimplementsAfterViewInit{
title="首页";
title2="首页2";
name="姓名111";// 获取模板内的第一个指定组件
@ViewChild(HeaderComponent)
privateheader1:HeaderComponent;
// 如果有多个相同的标签,可以用本地变量名来选择
@ViewChild('header2')
privateheader2:HeaderComponent;
// 也可以用ViewChildren 获取所有同类型子组件
@ViewChildren(HeaderComponent)
privateheaders: 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后才能使用,这也好理解,只有显示了以后,才能注入嘛。