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

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

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

//content.component.tsimport { 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