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

Question

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

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

我在 ngOnInit 中使用 ViewChild:

从我的父组件调用它

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

但是如果我从父组件中的 ngOnInit 调用它，this.subject$ 的 subscribe 永远不会被触发。如果我使用来自父项或子项的按钮调用该方法，subscribe 会正常触发。我做错了什么？

查看 StackBlitz 演示 here。

Answer 1

child 中的 subscribe() 被调用在初始化 parent 之后。 Angular 以与 DOM 相同的顺序初始化组件，因此首先初始化 parent 组件，然后初始化 child。

如果没有任何订阅，Subject() 会丢弃发出的值，并且由于 child 订阅晚了，它不会收到值。

您可以使用 BehaviorSubject() or a ReplaySubject() 取决于您是否需要初始值。

Answer 2

您需要使用 AfterViewInit 生命周期钩子。调用 OnInit 时，您的子组件尚未呈现。

所以这会起作用：

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

Answer 3

使用 BehaviorSubject 而不是 Subject

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

按照这个问题来理解 Subject 和 BehaviorSubject 之间的区别

Subject not triggering when being called from parent component in ngOnInit