组件结构如下:
main.html
<div class="row">
<div class="col-sm-2 col-md-2 catalog">
<app-catalog [input]="catalogmsg" (event)="getData($event)"></app-catalog>
</div>
<div class="col-sm-5 col-md-5 board">
<app-board></app-board>
</div>
<div class="col-sm-5 col-md-5 preview">
<app-preview></app-preview>
</div>
</div>
main为父组件,内有三个子组件:app-catalog、app-board、app-preview
由于三个子组件之间存在一些值的互相调用,所以将main作为中介,创建main.service从后台取得数据,传给所需的子组件,处理后的值再传回父组件,继续与后台相连。
一、父组件-->子组件(使用@Input)
1、定义父组件
ts文件
catalogmsg是父组件传向子组件的变量
html文件
通过[input]将catalogmsg值传入子组件app-catalog
2、定义子组件
ts文件
使用@Input装饰变量input(要与父组件中[]中的变量一致),即可接收父组件中传来的值。
使用ngOnChanges()监控数据的变化,父组件中的数据发生变化的话就触发该函数,此处console出来的值就是父组件中的catalogmsg。
二、子组件-->父组件(使用@Output)
子组件需要实例化EventEmitter类来订阅和触发自定义事件
1、定义子组件
ts文件
定义code变量作为子组件向父组件传输的值。
定义event为EventEmitter的一个实例,可以通过调用emit()方法来向上传递数据。
然后在该组件的某点击事件中获取值赋给code传过去即可:
this.event.emit(this.code);
2、定义父组件
ts文件
html文件
父组件会一直监听event,有变化时会调用getData来接收,event即为传过来的值。