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

本地变量

若只需要在父组件的模板中调用子组件方法，可以给子组件添加一个本地变量名，在模板中使用该名称调用。

父组件模板增加子组件的本地变量名(#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后才能使用，这也好理解，只有显示了以后，才能注入嘛。