場景：介面是由多個元件組成的，如果元件A中修改了資料內容，其他元件（與元件A中的資料有關聯的）需要相應修改，那麼就需要用到EventEmitter。

第一步：建立服務檔案：emit.service.ts

import { Injectable, EventEmitter } from '@angular/core';

@Injectable()
export class EmitService {
  public eventEmit: any;

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

第二步：配置模組：app.module.ts / app.component.ts

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

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

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

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <event-emit></event-emit>
    <event-subscribe></event-subscribe>
  `
})
export class AppComponent {
  constructor() {}
}

第三步：在元件中發射訊息：emit.component.ts

import { Component } from '@angular/core';
import { EmitService } from './emit.service';

@Component({
  selector: 'event-emit',
  templateUrl: './emit.component.html'
})
export class EmitComponent {
  constructor(public emitService: EmitService) {}

  emitFun() {
    // 如果元件中，修改了某些資料，該資料在其他元件中有關聯，那麼就可以發射一個字串過去
    // 對方接收到這個字串比對一下，重新整理資料。
    this.emitService.eventEmit.emit('changeYourName');
  }
}
 

第四步：在元件中接收訊息：subscribe.component.ts

import { Component, OnInit } from '@angular/core';
import { EmitService } from './emit.service';

@Component({
  selector: 'event-subscribe',
  templateUrl: './subscribe.component.html'
})
export class SubscribeComonent implements OnInit {
  constructor(public emitService: EmitService) {}

  ngOnInit() {
    // 接收發射過來的資料
    this.emitService.eventEmit.subscribe((value: any) => {
      if (value == 'changeYourName') {
        // 這裡就可以操作資料
        alert('收到了，我立馬修改你的名字');
      }
    });
  }

}