Angular组件间通信新方案详解

引言

在Angular开发中，组件间通信始终是核心议题。本文介绍的方案基于Angular服务特性与注册表模式，提炼出一个公共的DataService。其最大优势在于，消息收发直接整合，无需为每条通信链路单独编写服务代码。

背景

先快速回顾Angular现有的组件间通信方式：

序号	通信方式	描述
1	输入属性（@Input）	通过属性绑定，将数据从父组件传递给子组件。
2	输出属性（@Output）	通过事件绑定，子组件可以发送事件给父组件，并传递数据。
3	父子组件直接访问	在某些情况下，父组件可以通过 ViewChild 或 ContentChild 装饰器直接访问子组件或模板中的元素。
4	服务（Service）	创建共享的服务，组件可以注入该服务来存储和获取数据。
5	RxJS Subject 和 Observable	使用 RxJS 中的 Subject 和 Observable 来实现组件之间的消息传递。
6	Angular 路由参数	通过路由参数在不同组件之间传递数据。
7	NgRx	使用 NgRx 状态管理库来实现更复杂的组件间通信和数据共享。

这些方法各有局限：要么代码量较大，要么学习曲线较陡。当通信链路由多个组件构成时（例如从组件D到组件G），前两种方式实现起来较为复杂。方式4和5是常见解法，但依然较为繁琐——每一组消息传递都需要独立的服务代码。

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

本文介绍的方案本质上是对方式4和5进行抽象封装，产出公共的DataService。使用后，消息一收一发，中间接缝代码无需手动编写。

常规方式实现组件间消息通信

为便于对比，先展示“方案4+5”的常规实现。该组合通过Service与RxJS Subject结合，可在任意组件间搭建通信桥梁。

首先创建MessageService服务，负责透传消息：

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

然后是经典的SenderComponent和ReceiverComponent：前者发送，后者接收。

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

该示例中，MessageService通过RxJS的Subject构建可观察的消息流。SenderComponent调用sendMessage投递数据，ReceiverComponent通过subscribe订阅流以接收消息。

关键细节：为让MessageService成为全局可用的单例，@Injectable中指定了providedIn: 'root'。这样整个应用内的组件都能共享同一服务实例。

需将SenderComponent和ReceiverComponent注册到模块，并在模块模板中放置对应组件选择器。

如此，SenderComponent发出的消息经过MessageService传递到ReceiverComponent，最终展示在模板中。

新的解决方案

理解新方案需要对Angular服务的共享机制和RxJS的多播模式有基本认识。

核心思路：利用服务的单例特性（同一模块内组件共享同一实例），配合Subject的天然多播能力，构造一个公共的Service，通过它完成跨组件数据传递。而传统做法（如message.service.ts）需要为每组通信单独编写Service文件和流程。

该方案有三个关键点：

单例：在@Injectable中设置providedIn: 'root'，Service成为全局共享的单一实例。共享特性使其能充当消息传递载体，这是方案根基。

RxJS的多播：底层采用观察者模式（发布-订阅）。

注册表：为复用Service、简化代码，引入注册表存放每个消息事件对应的Subject对象。Subject实例在创建监听的地方（即接收消息端）被创建。

以下为公共Service的核心代码：

// dataService.service.ts
import { Injectable } from '@angular/core';
import { Subject, Subscription } from 'rxjs';
@Injectable({
  providedIn: 'root',
})
export class DataService {
  // 创建注册表，用于存放监听器
  private events = new Map();
  /**
   * 发送消息
   */
  sendMessage(event: string, value: T): void {
    if (!this.events.has(event)) {
      return;
    }
    this.events.get(event).subject.next(value);
  }
  /**
   * 获取监听器
   *
   * 注意：
   * 1. getListener()应该在sendMessage()之前调用
   * 2. 应放在ngOnInit()、ngAfterViewInit()等只会执行一次的生命周期函数中
   */
  getListener(event: string): Subject {
    // 多处监听时走此分支
    if (this.events.has(event)) {
      const current = this.events.get(event);
      current.count++;
      return current.subject;
    }
    const listener = {
      count: 1,
      subject: new Subject(),
    };
    // 监听器在创建监听时加入注册表
    this.events.set(event, listener);
    return listener.subject;
  }
  /**
   * 取消订阅
   *
   * 必须手动取消订阅。
   * 取消时检查监听者个数，没有监听者了就移除监听器。
   */
  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();
  }
}

使用时，只需引入公共DataService，直接调用其API即可。

创建监听的示例：

// 接收传递过来的消息
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);
}

给出一个较完整的使用示例

以下为使用DataService搭建通信的完整示例。

假设有两个组件：SenderComponent和ReceiverComponent，通过DataService传递消息。

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

该示例中，DataService的sendMessage方法投递消息，getListener方法订阅消息流，并在收到消息时更新ReceiverComponent的receivedMessage属性。cancelSubscription方法取消订阅，并在无监听者时从注册表清理对应监听器。

同样需将两个组件注册到模块，并在模块模板中放入选择器。

通过使用DataService，SenderComponent发出的消息成功传递到ReceiverComponent并显示。组件间消息通信得以顺滑实现。

实践拓展

该思路还可继续进化，例如做成插件，以装饰器形式调用：

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

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

这种写法相当优雅。以上是本次分享的完整内容，欢迎对前端技术感兴趣的朋友交流、参与共建。

关于 OpenTiny

OpenTiny 是一套企业级组件库解决方案，适配 PC / 移动端等多端场景，覆盖 Vue2 / Vue3 / Angular 多技术栈。它还包含主题配置系统、中后台模板、CLI 命令行等效率提升工具，能帮助开发者高效构建 Web 应用。

核心亮点：

• 跨端跨框架：基于 Renderless 无渲染组件设计架构，一套代码同时支持 Vue2 / Vue3、PC / Mobile，支持函数级别的逻辑定制和全模板替换，灵活性突出，二次开发能力强。
• 组件丰富：PC 端 80+ 组件，移动端 30+ 组件，包含高频组件 Table、Tree、Select 等，内置虚拟滚动保证大数据场景下的流畅体验。除了常见组件外，还有 Split 面板分割器、IpAddress IP 地址输入框、Calendar 日历、Crop 图片裁切等特色组件。
• 配置式组件：组件支持模板式和配置式两种使用方式，非常适合低代码平台。团队已将 OpenTiny 集成到内部低代码平台，并针对低码场景做了大量优化。
• 周边生态齐全：基于 Angular + TypeScript 的 TinyNG 组件库，提供 10+ 实用功能、20+ 典型页面的 TinyPro 中后台模板，覆盖前端开发全流程的 TinyCLI 工程化工具，以及强大的在线主题配置平台 TinyTheme。