Angular 2+ 中无父子关系的组件之间如何实现动态数据传递？

下面针对你提到的@Input()限制、*ngIf场景下更新失效、动态数据返回undefined、浏览器回退按钮适配等问题，提供几种可直接落地的实现方案：

方案1：共享服务 + RxJS BehaviorSubject（全场景通用） #

该方案不受组件层级、渲染状态、路由关系的限制，是最通用的跨组件传值方案：

• 第一步：创建全局共享服务，定义可观察对象存储动态数据

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

@Injectable({ providedIn: 'root' })
export class DataShareService {
  // 替换泛型为你实际需要传递的数据类型，初始值可自定义
  private dynamicDataSubject = new BehaviorSubject<any>(null);
  public dynamicData$ = this.dynamicDataSubject.asObservable();

  // 数据更新入口
  public updateDynamicData(data: any): void {
    this.dynamicDataSubject.next(data);
  }
}

• 第二步：发送数据的组件注入服务，数据变化时调用更新方法

// 发送方组件
constructor(private dataShareService: DataShareService) {}

// 动态数据变更时触发
handleDataChange(newVal: any): void {
  this.dataShareService.updateDynamicData(newVal);
}

• 第三步：接收数据的组件注入服务，订阅数据变化

// 接收方组件
import { Subscription } from 'rxjs';

private dataSubscription: Subscription;
constructor(private dataShareService: DataShareService) {}

ngOnInit(): void {
  this.dataSubscription = this.dataShareService.dynamicData$.subscribe(data => {
    if (data) { // 过滤初始空值
      // 此处拿到的始终是最新的动态数据，不受*ngIf销毁重建影响
      this.receivedData = data;
    }
  });
}

ngOnDestroy(): void {
  // 组件销毁时取消订阅，避免内存泄漏
  this.dataSubscription?.unsubscribe();
}

方案2：路由状态传值（适配路由跳转场景，支持浏览器回退） #

如果两个组件是路由跳转关系，可直接使用Angular路由自带的状态传参，回退时状态会自动保留：

• 路由跳转时传值：

constructor(private router: Router) {}

jumpToTargetPage(): void {
  this.router.navigate(['/target-route'], {
    state: { dynamicData: yourCustomData }
  });
}

• 目标组件取值：

constructor(private router: Router) {}

ngOnInit(): void {
  // 首次跳转取值
  let data = this.router.getCurrentNavigation()?.extras.state?.['dynamicData'];
  // 浏览器回退场景取值
  if (!data) data = history.state.dynamicData;
  this.receivedData = data;
}

方案3：异步管道配合*ngIf（父子组件场景轻量解决方案） #

如果是父子组件传值，只是动态数据未加载完成时子组件就被渲染导致@Input()拿到undefined，可使用异步管道等待数据就绪后再渲染子组件：
父组件模板：

<!-- dynamicData$ 是父组件的动态数据可观察对象 -->
<app-child *ngIf="dynamicData$ | async as realData" [inputData]="realData"></app-child>

该方案无需额外引入服务，即可保证子组件初始化时就能拿到完整的动态数据。

方案4：状态管理库（中大型项目通用方案） #

如果项目复杂度较高，有多组件共享大量状态的需求，可接入NgRx、NgXs等状态管理库，所有动态状态统一存储在全局store中，任意组件都可订阅获取最新状态，还可搭配持久化插件实现刷新页面也不丢失UI状态的需求。

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