父组件通过局部变量获取子组件引用

子组件定义需要传递到父元素的方法fn

//content.component.ts
import { Component } from '@angular/core';
@Component({
 selector: 'content',
 templateUrl: './content.component.html',
 styleUrls: ['./content.component.css']
})
export class ContentComponent {
 title = 'content';
 fn(){
   alert('子组件方法')
 }
}

父组件（示例请查看上面的app.component.html和app.component.ts）

父组件通过#号来标识一个变量, 这样在父组件模板中创建了一个局部变量#children来获取子组件的实例,调用子组件中的方法和属性。上面例子中我们定义了#children之后，绑定点击就可以调用子组件的方法fn了，这种方式可以想象父组件在子组件上装了一个探测仪，就探测到子组件数据变化。

这种通过在子组件模版上设置局部变量的方式获取子组件的成员变量，但是有一个限制，必须在父组件的模版中设置局部变量才能够获取到子组件成员。

父组件通过使用@ViewChild获取子组件引用

子组件（示例请查看上面content.component.ts）

与局部变量方法相同，在子组件中定义一个fn方法

父组件（示例请查看上面的app.component.html和app.component.ts）

父组件中使用@ViewChild(ContentComponent) child:ContentComponent;获取子组件content的组件实例并赋值给child，这样就把子组件实例保存到父组件的child中，这样父组件就可以在child中取到子组件的属性和方法了，同样你也可以设置ViewChild的参数为字符串的方式实现，这和绑定模板局部变量是一样的，这里就不多做介绍了。

总的来说，angular组件间的数据传递方式比较多，这里只是结合学习过程，逐步了解一下一些比较粗浅的组件间数据传递的方式，希望能在您学习angular2的过程中，对您有所帮助。

本转载自 Think体验设计公众号。

原文链接：https://mp.weixin.qq.com/s/QBYWSVi0DDKKNf1GLC5sTw

创作场景

Angular2 组件间的数据传递，这几种姿势你知道吗（三）