angular2父子组件之间传值

组件结构如下:

main.html

main为父组件,内有三个子组件:app-catalog、app-board、app-preview

由于三个子组件之间存在一些值的互相调用,所以将main作为中介,创建main.service从后台取得数据,传给所需的子组件,处理后的值再传回父组件,继续与后台相连。

一、父组件-->子组件(使用@Input)

1、定义父组件

ts文件

angular2父子组件之间传值_第1张图片

catalogmsg是父组件传向子组件的变量

html文件

angular2父子组件之间传值_第2张图片

通过[input]将catalogmsg值传入子组件app-catalog

2、定义子组件

ts文件

angular2父子组件之间传值_第3张图片

使用@Input装饰变量input(要与父组件中[]中的变量一致),即可接收父组件中传来的值。

使用ngOnChanges()监控数据的变化,父组件中的数据发生变化的话就触发该函数,此处console出来的值就是父组件中的catalogmsg。


二、子组件-->父组件(使用@Output)

子组件需要实例化EventEmitter类来订阅和触发自定义事件

1、定义子组件

ts文件

angular2父子组件之间传值_第4张图片

定义code变量作为子组件向父组件传输的值。

定义event为EventEmitter的一个实例,可以通过调用emit()方法来向上传递数据。

然后在该组件的某点击事件中获取值赋给code传过去即可:

this.event.emit(this.code);

2、定义父组件

ts文件

angular2父子组件之间传值_第5张图片

html文件

angular2父子组件之间传值_第6张图片

父组件会一直监听event,有变化时会调用getData来接收,event即为传过来的值。

你可能感兴趣的:(angular2)