Angular通过服务实现兄弟组件实时数据订阅方案咨询

• 子组件2现有代码订阅的目标完全错误：updateFilterDate是共享服务里的普通方法，不是可观察对象，直接对方法调用subscribe无法建立有效的数据流订阅，自然收不到值更新。
• 「把订阅写在ngOnInit里就无法实时接收值」是认知误区：只要订阅的是正确的可观察流、没有主动终止流或取消订阅，组件存活期间所有新推送的值都会实时触发订阅回调，完全满足日期频繁变更的实时更新需求，不需要刻意脱离生命周期钩子实现。
• 额外排查点：如果修正订阅代码后还是收不到值，检查共享服务的注入层级，不能在两个子组件的@Component装饰器providers数组里单独注册该服务，否则两个组件会拿到独立的服务实例，数据无法互通。

现有Child1、共享服务的代码逻辑本身没有问题，父组件也不需要做任何改动，只需要修正Child2的订阅逻辑即可。

写法1：手动管理订阅（适合需要在拿到值后执行复杂业务逻辑的场景） #

直接修正Child2的代码，订阅服务暴露的filterDate$可观察对象，记得在组件销毁时取消订阅防止内存泄漏：

import { Component, OnDestroy, OnInit } from '@angular/core';
import { Subscription } from 'rxjs';
// 其他业务依赖自行引入

@Component({
  selector: 'app-child2',
  templateUrl: './child2.component.html'
  // 注意：*不要在这里单独providers注册共享服务*
})
export class Child2Component implements OnInit, OnDestroy {
  fromDate: string;
  private dateSub: Subscription;

  // 如果要脱离ngOnInit写订阅，直接把订阅逻辑移到构造函数里即可，效果一致
  constructor(private sharedService: SharedService) {}

  ngOnInit(): void {
    // 正确订阅服务暴露的可观察流，而非updateFilterDate方法
    this.dateSub = this.sharedService.filterDate$.subscribe(dateVal => {
      // 跳过BehaviorSubject初始推送的null值，避免触发无效筛选请求
      if (!dateVal) return;
      this.fromDate = dateVal;
      // 此处直接写拉取筛选结果的业务逻辑即可，每次日期变更会自动触发
      // this.loadFilterResult(dateVal)
    });
  }

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

写法2：async管道自动订阅（推荐，无需手动管理订阅） #

不需要写取消订阅逻辑，Angular会自动处理，代码更简洁：

1. 组件类中直接声明数据流：

import { Component } from '@angular/core';
import { filter } from 'rxjs/operators';
// 其他业务依赖自行引入

@Component({
  selector: 'app-child2',
  templateUrl: './child2.component.html'
})
export class Child2Component {
  // 过滤掉初始null值，直接暴露给模板使用
  fromDate$ = this.sharedService.filterDate$.pipe(
    filter(date => !!date)
  );

  constructor(private sharedService: SharedService) {}
}

2. 模板中直接通过async管道订阅使用：

<ng-container *ngIf="fromDate$ | async as selectedDate">
  <!-- 此处直接使用selectedDate渲染筛选结果，值更新时视图自动刷新 -->
  <p>当前选中筛选日期：{{selectedDate}}</p>
</ng-container>

• 共享服务里用BehaviorSubject的写法本身是合理的，它会留存最新的值，哪怕子组件2比子组件1晚初始化，也能拿到最近一次推送的日期值，不会错过数据。
• 如果确实需要把订阅逻辑完全移出ngOnInit，除了写在构造函数里，也可以写在类属性初始化的位置，只是正常业务场景下没有必要，ngOnInit是Angular官方推荐的组件初始化逻辑放置位置。

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