ionic4之父子公共组件使用

1.在创建一个公共的component组件，称为父组件，在其他页面中使用该组件，故其他页面都称为子组件。

父子组件之间的传值方式，

父组件中使用@input和@output进行接收值和传值，在子标签中使用[input]=“‘red’”，即可将red值传给父组件。

在父组件中使用@output定义的变量，如父组件定义@outPut  HiHi:EventEmitter<any> =new EventMitter();

子组件像调用方法一般调用即可：(HiHi)="getData($evevnt)"    子组件输出数据，父组件通过this.HiHi.emit('6666')传值。

@HostBinding("style.z-index") style=9999;这个属性可以修改父组件的样式

下面代码：

父组件：

export class ClosePopupComponent {

  @HostBinding('style.z-index') style = 1000;

  @Input() large: boolean;
  @Input() color: string;
  @Output() closePopUp: EventEmitter<any> = new EventEmitter();

  constructor() {}

  close() {
    console.log(this.color);
    this.closePopUp.emit("6666");
  }

}

子组件：

export class Tab1Page {

  getData(e){
    console.log("6666888");
     console.log(e);
  }
}

 

<ion-content>
     <close-popup (closePopUp)="getData($event)" [color]="'red'" [large]="'true'"></close-popup>
</ion-content>

 

注意：子组件页面中【color】传值必须用‘’包住才行。