angular8组件传值总结（一）

一、父---->子

1、<!--父组件html部分-->
<div class="father_part">
  <!--  引入的子组件-->
  <children-app [parentData]='childParamObj'></children-app>
</div>

2、<!--父组件ts部分-->
/* 定义父传子对象 */
childParamObj = {};
/*--通过事件传递值*/
toChild() {
  this.eventAggregator.publish('goSearch', this.childParamObj);
}

3、<!--子组件接收(ts)-->
<!--定义接收父组件传过来的值变量-->
  @Input() parentData: any;
  <!--接收值并使用-->
 constructor() {
    this.eventAggregator.subscribe('goSearch', '', (data) => {
      this.parentData = data;
    });
  }

二、子—>父

1、<!--子传递父组件方式(ts)-->
<!--定义要传递到父组件的事件和值-->
  @Output() tranParent = new EventEmitter<any>();
  tranObj = {};
  <!--通过.emit进行传递-->
  toParent() {
   this.tranParent.emit(this.tranObj);
  }

2、<!--父组件html部分-->
<div class="father_part">
  <!--  引入的子组件-->
  <children-app (tranParent)=getChildData($event) ></children-app>
</div>

3、<!--父组件ts部分-->
/* 定义接收子组件传过来的值的变量 */
childData = {};
/*--获取子组件值并使用*/
getChildData(val: any) {
  this.childData = val;
}