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

来源：互联网发布：网络出租车管理办法编辑：程序博客网时间：2024/06/05 11:39

本地变量

若只需要在父组件的模板中调用子组件方法，可以给子组件添加一个本地变量名，在模板中使用该名称调用。
父组件模板增加子组件的本地变量名(#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

0 0