【Angular】父组件监听子组件事件(传参)

Angular官方文档Demo地址：>component-interaction#parent-listens-for-child-event

举一个自己在写的项目🌰

子组件 imageupload 中的一个事件 onCropped(e:ImgCropperEvent)

onCropped(e: ImgCropperEvent) {
    this.croppedImage = e.dataURL;
    console.log("cropped img: ", e);
    // console.log("dataURL", e.dataURL);
    this.imgurl = e.dataURL;
    this.getImgUrl.emit(this.imgurl);
  }

目的：是想要在父组件中获取到子组件的数据，我选择了通过监听事件的方法来传递。

用到的组件：

import {Output,EventEmitter} from "@angular/core";

---

 

@Output() getImgUrl = new EventEmitter<string>();

@Output() 声明getImgUrl的同时输出

 

子组件的CSS selector名：

 

 

父组件 使用该selector：

<app-images-editorbox (getImgUrl)="onGetImgUrl($event)"></app-images-editorbox>

 

当监听到事件发生时会调用onGetImgUrl()事件处理, 事件参数(用 $event 表示)传给事件处理方法。

 

onGetImgUrl(imgUrl: string) {
    this.imgUrl = imgUrl;
  }

 

画个图梳理一下：

 

 

 

 

当然了还有许多方法来进行组件之间的通讯，选择合适的方法来进行开发。