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

【问题标题】：Subject not triggering when being called from parent component in ngOnInit从 ngOnInit 中的父组件调用时未触发主题
【发布时间】：2019-11-18 20:18:47
【问题描述】：

我正在使用 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。

【问题讨论】：

您可能在从ngOnInit() 致电updateSubject 后订阅。除非您共享所有代码，否则很难分辨。

标签： angular rxjs angular7 ngoninit

【解决方案1】：

子中的subscribe() 在父初始化之后被调用。 Angular 初始化组件的顺序和 DOM 一样，所以先初始化父组件，再初始化子组件。

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

您可以使用BehaviorSubject() 或ReplaySubject()，具体取决于您是否需要初始值。

【讨论】：

有时我确实需要一个初始值，有时我不需要。你不是说用afterViewInit生命周期钩子来调用子组件中的方法会更好吗？
@Viqas afterViewInit 要求开发人员了解此特殊要求。他们怎么会知道？添加文档或示例。如果他们不使用afterViewInit，孩子可以打破吗？对我来说，父母做什么并不重要。

【解决方案2】：

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

所以这会起作用：

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

【讨论】：

【解决方案3】：

使用 BehaviorSubject 代替 Subject

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

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

Difference between Subject and BehaviorSubject

【讨论】：