Angular组件间通信的新解决方案详解

组件A
       /      \
     组件B      组件C
    /   \      /    \
  组件D 组件E 组件F  组件G

// message.service.ts
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
@Injectable({
  providedIn: 'root',
})
export class MessageService {
  private messageSubject = new Subject<string>();
  // Observable string stream
  message$ = this.messageSubject.asObservable();
  // Service method to send a message
  sendMessage(message: string) {
    this.messageSubject.next(message);
  }
}

// sender.component.ts
import { Component } from '@angular/core';
import { MessageService } from './message.service';
@Component({
  selector: 'app-sender',
  template: `
    <input type="text" [(ngModel)]="message" />
    <button (click)="sendMessage()">发送消息</button>
  `,
})
export class SenderComponent {
  message: string;
  constructor(private messageService: MessageService) {}
  sendMessage() {
    this.messageService.sendMessage(this.message);
    this.message = ''; // 清空输入框
  }
}

// receiver.component.ts
import { Component } from '@angular/core';
import { MessageService } from './message.service';
@Component({
  selector: 'app-receiver',
  template: ` <div>接收到的消息: {{ receivedMessage }}</div> `,
})
export class ReceiverComponent {
  receivedMessage: string;
  constructor(private messageService: MessageService) {
    this.messageService.message$.subscribe(message => {
      this.receivedMessage = message;
    });
  }
}

// dataService.service.ts
import { Injectable } from '@angular/core';
import { Subject, Subscription } from 'rxjs';
@Injectable({
  providedIn: 'root',
})
export class DataService<T> {
  // 创建注册表，用于存放监听器
  private events = new Map();
  /**
   * 发送消息
   *
   * @param {string} event 事件。用于区别不同的监听
   * @param {T} value 消息内容
   * @returns {void}
   * @memberof DataService
   */
  sendMessage(event: string, value: T): void {
    if (!this.events.has(event)) {
      return;
    }
    this.events.get(event).subject.next(value);
  }
  /**
   * 获取监听器
   *
   * 监听器其实就是一个rxjs Subject对象，通过订阅来获取数据。
   *
   * 注意：
   * 1.getListener()应该在sendMessage()之前，否则sendMessage()中获取不到监听器，无法发消息
   * 2.getListener()应放在ngOnInit()、ngAfterViewInit()等只会执行一次的生命周期函数中
   *
   * @param {string} event 事件。用于区别不同的监听
   * @returns {Subject<T>}
   * @memberof DataService
   */
  getListener(event: string): Subject<T> {
    // 多处监听时会走到此分支
    if (this.events.has(event)) {
      const current = this.events.get(event);
      current.count++;
      return current.subject;
    }
    const listener = {
      count: 1, // 该字段用于记录监听（订阅）者个数
      subject: new Subject<T>(),
    };
    /**
     * 创建监听器，并将其加入注册表
     *
     * 所在函数在创建监听（订阅）时调用，监听发生在发送消息之前，所以在监听这里将监听器加入注册表
     */
    this.events.set(event, listener);
    return listener.subject;
  }
  /**
   * 取消订阅
   *
   * 必须手动取消订阅。
   * 取消时检查监听者个数。如果没有监听者了，就移除监听器。
   *
   * @param {string} event
   * @param {Subscription} subscription
   * @returns
   * @memberof DataService
   */
  cancelSubscription(event: string, subscription: Subscription) {
    if (!this.events.has(event)) {
      return;
    }
    const current = this.events.get(event);
    current.count--;
    if (current.count === 0) {
      // 没有监听者了，就移除监听器
      this.events.delete(event);
    }
    subscription.unsubscribe();
  }
}

// 接收传递过来的消息
  receiveChangeMessage;
  ngOnInit() {
    ...
    this.subscription = this.dataService.getListener('event_name').subscribe(message => {
        this.receiveChangeMessage = message;
      });
    ...
  }
  ngOnDestroy() {
    this.dataService.cancelSubscription('event_name', this.subscription);
  }

public onSomethingChange(value: boolean): void {

    ...

    this.dataService.sendMessage('event_name', value);
  }

// sender.component.ts
import { Component } from '@angular/core';
import { DataService } from './data.service';
@Component({
  selector: 'app-sender',
  template: `
    <input type="text" [(ngModel)]="message" />
    <button (click)="sendMessage()">发送消息</button>
  `,
})
export class SenderComponent {
  message: string;
  constructor(private dataService: DataService<string>) {}
  sendMessage() {
    this.dataService.sendMessage('customEvent', this.message);
    this.message = ''; // 清空输入框
  }
}

// receiver.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { DataService } from './data.service';
import { Subscription } from 'rxjs';
@Component({
  selector: 'app-receiver',
  template: ` <div>接收到的消息: {{ receivedMessage }}</div> `,
})
export class ReceiverComponent implements OnInit, OnDestroy {
  receivedMessage: string;
  subscription: Subscription;
  constructor(private dataService: DataService<string>) {}
  ngOnInit() {
    this.subscription = this.dataService.getListener('customEvent').subscribe(message => {
      this.receivedMessage = message;
    });
  }
  ngOnDestroy() {
    this.dataService.cancelSubscription('customEvent', this.subscription);
  }
}

export class ReceiveComponent {
  @listen('messageEvent')
  message;
}

export class SendComponent {
  @send('messageEvent')
  message;
}