之前的文章講過元件和元件之間的通訊，使用@Output @Input,侷限，如果元件巢狀層次比較深，那麼就很麻煩了。之前文章地址：https://segmentfault.com/a/11...

注意：現在的場景是這樣的，介面是由N多個元件組成的，如果一個元件中修改了介面的內容，其他元件需要調介面重新整理資料，那麼就用到了EventEmitter

1、建立服務，new一個EventEmitter

import {Injectable, EventEmitter, OnInit} from "@angular/core";
@Injectable()
export class EmitService implements OnInit {
    public eventEmit: any;

    constructor() {
        // 定義發射事件
        this.eventEmit = new EventEmitter();
    }

    ngOnInit() {

    }
}
 

2、配置module.ts

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';

import {AppComponent} from './app.component';
import {EmitComonent} from "./emit.component";
import {EmitService} from "./emit.service";

@NgModule({
    declarations: [
        AppComponent,
        EmitComonent
    ],
    imports: [
        BrowserModule
    ],
    providers: [
        EmitService
    ],
    bootstrap: [
        AppComponent
    ]
})
export class AppModule {
}
 

3、定義元件，發射訊息

import {Component} from '@angular/core';
import {EmitService} from "./emit.service"
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    constructor(public emitService: EmitService) {

    }

    emitFun() {
        // 如果元件中，修改了某些資料，需要重新整理用使用者列表，使用者列表在其他元件中，那麼就可以發射一個字串過去，那邊接收到這個字串比對一下，重新整理列表。
        this.emitService.eventEmit.emit("userList");
    }
}
 

4、定義接收元件，接收比對發射的字串，判斷，調取介面，重新整理元件內容

import {Component, OnInit} from "@angular/core";
import {EmitService} from "./emit.service"
@Component({
    selector: "event-emit",
    templateUrl: "./emit.component.html"
})
export class EmitComonent implements OnInit {
    constructor(public emitService: EmitService) {

    }

    ngOnInit() {
        // 接收發射過來的資料
        this.emitService.eventEmit.subscribe((value: any) => {
           if(value == "userList") {
               // 這裡就可以調取介面，重新整理userList列表資料
               alert("收到了，我立馬重新整理列表");
           }
        });
    }

}

總結：其實就是EventEmitter的兩個方法，emit(),subscribe()發射和接收；