从ngOnInit的父组件调用时主题未触发

Question

我正在使用Rxjs和Angular7。我有一个父组件和一个子组件。 我有一种方法可以在子组件上调用Subject ：

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

我使用ViewChild从ngOnInit父组件中ngOnInit ViewChild ：

ngOnInit() {
  this.childComponent.updateSubject('New Text');
}

但是，如果我从父组件中的ngOnInit调用，则永远不会触发对this.subject$的subscribe 。 如果我使用父级或子级中的一个按钮调用该方法，则subscribe会触发。 我究竟做错了什么？

在此处查看StackBlitz演示。

Answer 1

父级初始化后 ，将调用子级中的subscribe() 。 Angular按照与DOM相同的顺序初始化组件，因此先初始化父组件，然后再初始化子组件。

如果未订阅任何内容，则Subject()会丢弃发射的值，并且由于子级订阅较晚，因此不会接收该值。

您可以使用BehaviorSubject（）或ReplaySubject（）取决于您是否需要初始值。

Answer 2

您需要使用AfterViewInit生命周期挂钩。 调用OnInit时尚未渲染您的子组件。

所以这将工作：

ngAfterViewInit() {
 this.childComponent.updateSubject('View initialized');
}

Answer 3

使用BehaviorSubject代替Subject

subject$: BehaviorSubject<string> = new BehaviorSubject<string>(null);

遵循此问题以了解主题和行为主题之间的区别

主体与行为主体之间的差异