1. 程式人生 > >Angular2 --- 通過服務實現元件之間的通訊EventEmitter

Angular2 --- 通過服務實現元件之間的通訊EventEmitter

場景:介面是由多個元件組成的,如果元件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('收到了,我立馬修改你的名字');
      }
    });
  }

}