相对于上篇【Angular组件通讯(@Input,@ViewChild)】文章中【子组件给父组件通讯】是父组件通过使用【@ViewChild】主动获取子组件的数据和方法,下面我们在学习另外一种相对复杂的方式实现:
一、前提准备:
首先使用 CLI 创建两个组件,分别是【parent】和【news】分别扮演父子组件(相对);
二、演示步骤:
子组件通过 @Output 触发父组件的方法
- 子组件引入 Output 和 EventEmitter;
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
- 子组件中实例化 EventEmitter;
//用 EventEmitter 和 Output 装饰器配合使用,<string> 指定变量类型
@Output() private outer = new EventEmitter<string>();
- 子组件通过 EventEmitter 对象 outer 实例广播数据;
runNews():void{
console.info('开始emit广播数据');
this.outer.emit('我是news新闻组件'); //通过outer实例对象的emit方法广播数据
}
- 父组件调用子组件的时候,定义接收事件,outer 就是子组件的 EventEmitter 对象 outer ;
//父组件中挂载子组件,注意 (outer) 名称必须和子组件中的名称一致对应
<app-news (outer)="runParent($event)"></app-news>
- 父组件接收到数据会调用自己 ts 文件中的 runParent 方法,此时父组件就能拿到子组件的数据;
runParent(e:any):void{
console.log('我是parent父组件的runParent方法');
console.log(e); //e就接收到子组件中方法的(emit)广播数据
}
三、总结:
【子组件给父组件通讯】可以通过两种方式实现,分别如下:
- 简单方式,父组件通过 【@ViewChild】主动获取子组件的字段和方法;
- 复杂方式,子组件通过 【@Output,EventEmitter】 触发父组件的方法;