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

2019/09/06 17:27
阅读数 142

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;
  }

 

画个图梳理一下:

 

 

 

 

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

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部