angular子组件发生变化后使用EventEmitter主动通知父组件

环境&版本

angular9

一、需求&解决方案

后台类的项目中，界面往往十分复杂，需要有复杂的组件嵌套（可能超过三层），组件间通讯比较困难。

复杂例子：

详情页（父组件）
		拜访列表页（子组件）
				模态框（子子组件）

需求：模态框提交表单成功后，通知详情页刷新某两个接口数据。

解决方案1：表单提交成功后调用@input 传过来的父组件的方法。

结果：当父组件的方法里有复杂的http服务时，调取失败。

解决方案2：表单提交成功后子组件使用EventEmitter主动通知父组件自己调用方法。

结果：成功。

二、详细的例子

思路：创建parent, child两个组件，child

详细代码

1.parent

html

<app-emit-child (childResult)="loadPage($event)"></app-emit-child>

ts

import { Component, OnInit } from '@angular/core';
import { EmitChildComponent } from '../emit-child/emit-child.component';
@Component({
    selector: 'app-emit-parent',
    templateUrl: './emit-parent.component.html',
    styleUrls: ['./emit-parent.component.less']
})
export class EmitParentComponent implements OnInit {
    constructor() { }
    // 4.父组件收到通讯后作出相应反应
    loadPage(e) {
        console.log('父组件收到通讯，e: ', e);
    }
    ngOnInit(): void {}
}

2.child

html

<button (click)="submit()">表单提交</button>

ts

// 1. 注入Output, EventEmitter
import { Component, OnInit, Output, EventEmitter } from '@angular/core';

@Component({
    selector: 'app-emit-child',
    templateUrl: './emit-child.component.html',
    styleUrls: ['./emit-child.component.less']
})
export class EmitChildComponent implements OnInit {
    // 2. 输出；实例化emit
    @Output() childResult = new EventEmitter<any>();
    constructor() { }

    // 模拟表单提交
    submit() {
        // 3. 子组件主动发起通知
        // 注：emit('xxx') 可写可不写
        this.childResult.emit('hello');
    }

    ngOnInit(): void {
    }
}

三、总结

• 组件1变化后主动使用emit主动发出通讯

• 组件2收到通讯后根据业务作相应处理