Angular 7中父组件ngOnInit调用子组件Subject不触发问题

这个问题我之前也碰到过，核心是Angular组件生命周期顺序和RxJS Subject的特性共同导致的，我给你拆解下：

为什么会出现这个情况？ #

Angular的组件执行顺序是：父组件的ngOnInit先触发，之后才会初始化子组件并执行子组件的ngOnInit。如果你的子组件是在自己的ngOnInit（或者更晚的钩子）里对subject$进行订阅，那当父组件在自身ngOnInit中调用childComponent.updateSubject()时，子组件还没完成订阅。

而RxJS的普通Subject是热Observable，它不会缓存发送过的值，只会把值推送给当前已经订阅的观察者。所以这次提前发送的'New Text'就被漏掉了，自然不会触发订阅回调。

几种可行的解决方案 #

方案1：改用BehaviorSubject（最推荐，适配多数场景）

BehaviorSubject会始终保存最新发送的值，当新的观察者订阅时，会立即收到这个最新值。修改子组件的代码：

// 子组件内
import { BehaviorSubject } from 'rxjs';

// 初始化时可以设置一个默认值，也可以是空字符串
private subject$ = new BehaviorSubject<string>('');
// 对外暴露可观察对象，避免外部直接调用next
public subjectObs$ = this.subject$.asObservable();

updateSubject(text: string) {
  this.subject$.next(text);
}

这样不管父组件什么时候调用updateSubject，子组件后续订阅时都能拿到最新的那个值。

方案2：调整父组件调用时机到ngAfterViewInit

ngAfterViewInit是Angular生命周期中，所有子组件都完成初始化和视图渲染后才会触发的钩子。把父组件的调用逻辑移到这里：

// 父组件内
import { ViewChild, AfterViewInit } from '@angular/core';
// 记得把组件类实现AfterViewInit接口
export class ParentComponent implements OnInit, AfterViewInit {
  @ViewChild(ChildComponent) childComponent!: ChildComponent;

  ngOnInit() {
    // 这里不再调用updateSubject
  }

  ngAfterViewInit() {
    // 此时子组件已经完成订阅，调用后能正常触发回调
    this.childComponent.updateSubject('New Text');
  }
}

如果运行时出现变更检测警告，可以用setTimeout包裹或者借助ChangeDetectorRef手动触发变更：

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdr: ChangeDetectorRef) {}

ngAfterViewInit() {
  setTimeout(() => {
    this.childComponent.updateSubject('New Text');
    this.cdr.detectChanges();
  });
}

方案3：提前子组件的订阅时机

如果不想改Subject类型，也可以把子组件的订阅逻辑提前到更早的阶段，比如用async管道在模板中订阅（Angular会在组件初始化早期就完成订阅）：

<!-- 子组件模板 -->
<p>{{ subjectObs$ | async }}</p>

或者把订阅逻辑放到子组件的constructor里（不推荐，因为constructor应只做依赖注入，避免操作视图相关内容）。

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