Angular 13中无父子关系的两组件间传数据的最佳方式是什么

通用场景下的最佳实现方案是基于RxJS响应式流的单例共享服务，这也是Angular官方推荐的跨层级通信方式，完全适配兄弟组件、隔多代组件、不同路由下挂载的无关联组件等所有非父子关系场景，和Angular依赖注入机制深度整合，无额外依赖、数据流清晰、性能开销极低，调试维护成本远高于其他非正规方案。

共享服务方案具体实现 #

核心逻辑是利用Angular依赖注入的单例特性，让需要通信的组件注入同一个服务实例，通过服务内部的RxJS流完成数据的发布和订阅，具体步骤如下：

• 创建通信专用的共享服务，优先使用@Injectable({ providedIn: 'root' })装饰器声明为根注入器提供的全局单例，避免多实例导致的数据不通问题
• 服务内部根据业务场景选择合适的RxJS载体：如果是一次性事件通知用Subject即可；如果需要订阅者在订阅瞬间就能拿到最新的存量数据，用带初始值的BehaviorSubject。注意流要设为私有属性，对外只暴露asObservable()转换后的只读流，防止外部组件随意篡改流状态引发bug
• 发送数据的组件注入服务后，调用服务暴露的传值方法，通过next()向流中推送数据
• 接收数据的组件注入服务后订阅对应的流，在订阅回调里处理业务逻辑即可，必须在组件销毁阶段取消订阅，避免内存泄漏

参考代码实现 #

共享服务定义：

// shared-data.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class SharedDataService {
  // 私有写入流，仅服务内部可推送数据
  private readonly _crossComponentData$ = new BehaviorSubject<unknown>(null);
  // 对外暴露的只读数据流，供组件订阅
  public readonly crossComponentData$: Observable<unknown> = this._crossComponentData$.asObservable();

  /**
   * 跨组件发送数据的公共方法
   * @param data 要传递的任意格式数据
   */
  pushData(data: unknown): void {
    this._crossComponentData$.next(data);
  }
}

数据发送方组件用法：

// component-a.component.ts
import { Component } from '@angular/core';
import { SharedDataService } from './shared-data.service';

@Component({
  selector: 'app-component-a',
  template: `<button (click)="sendDataToB()">点击发送跨组件数据</button>`
})
export class ComponentA {
  constructor(private sharedDataService: SharedDataService) {}

  sendDataToB(): void {
    // 推送任意格式的数据
    this.sharedDataService.pushData({
      content: '来自无关联组件A的消息',
      sendTime: new Date().getTime()
    });
  }
}

数据接收方组件用法：

// component-b.component.ts
import { Component, OnDestroy, OnInit } from '@angular/core';
import { SharedDataService } from './shared-data.service';
import { Subject, takeUntil } from 'rxjs';

@Component({
  selector: 'app-component-b',
  template: `<div>收到的跨组件数据：{{ receivedData | json }}</div>`
})
export class ComponentB implements OnInit, OnDestroy {
  receivedData: unknown;
  // 用来触发订阅取消的销毁信号
  private destroy$ = new Subject<void>();

  constructor(private sharedDataService: SharedDataService) {}

  ngOnInit(): void {
    this.sharedDataService.crossComponentData$
      // 自动在组件销毁时取消订阅，避免内存泄漏
      .pipe(takeUntil(this.destroy$))
      .subscribe(data => {
        this.receivedData = data;
        // 此处编写收到数据后的业务处理逻辑
      });
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

注意避坑：如果不使用根注入器注册服务，而是在模块的providers数组中手动注册，一定要确保参与通信的所有组件都处于同一个注入器上下文；懒加载模块单独注册该服务会生成独立的服务实例，直接导致数据传递失效。

特定场景下的可选优化方案 #

共享服务是通用场景的最优解，但遇到特定场景可以选择更轻量化的实现，不用硬套共享服务：

• 路由关联组件传值：如果两个组件是通过路由跳转关联的，可以直接用Angular路由能力传值：简单参数放在queryParams中拼在url上，复杂敏感参数放在跳转配置的state字段中，目标路由通过Router服务获取即可，不需要额外创建服务
• 全局多模块共享状态：如果要传递的是用户信息、全局配置、权限列表这类被全应用多个模块依赖的全局状态，直接用@ngrx/store或者Angular官方的ComponentStore做统一状态管理即可，比零散创建多个共享服务更易维护
• 禁止使用的方案：不要用基于原生DOM自定义事件实现的全局事件总线，这类方案脱离Angular的变更检测上下文，很容易出现数据更新但视图不刷新的隐性bug，且数据流完全不可追踪，后期维护成本极高。

内容的提问来源于stack exchange，提问作者Sajid Hussain