Angular中的rx数据流在ngOnInit中初始化还是在constructor中初始化更好？

Question

最近在纠结这个问题。

@Component({
  template: `<div *ngIf="data$ | async"></div>`
})
class MyComponent implements NgOnInit {
  data$: Observable<string>
  constructor() { this.data$ = ... }
  ngOnInit() { this.data$ = ... }
}

类似上面这样的代码中， data$的初始化逻辑应该写在constructor中还是应该写在ngOnInit里面呢。目前纠结的点在于：

1. 写在ngOnInit里面的话， ts会报成员未初始化的错误， 需要在声明属性的时候添加非空断言data$!,现在感觉非空断言应该尽量少用或者不用。
2. 写在constructor里面的话，目前见到的大部分ng项目的初始化逻辑都写在ngOnInit里面。

有点纠结， 目前还是写在ngOnInit里面， 大家是怎么选择的呢？

Answer 1

一般是写在ngOnInit里面的。

至于未初始化的问题。webstrom编译器也有提示，类型可以加上undefined

originSecret: string | undefined;

Answer 2

constructor 类构造函数，构建类实例时被执行。
ngOnInit 是 angular 生命周期钩子，在它之前还有个 ngOnChanges，(官方定义)它会在初始化完了该指令的所有数据绑定属性之后调用。

区别：

1. ngOnInit是实例钩子函数，所以必然是在 constructor 之后
2. ngOnInit阶段，实例中的数据绑定属性是已经初始化好了的(重点)

你的 data$ 示例，如果它的初始化需要用到数据绑定属性，那么必须在 ngOnInit阶段，否则两处都可以(个人偏向constructor，避免不必要的非空断言)；

Answer 3

基于 constructor、ngOnInit 的概念。
个人使用习惯是，首先对于组件 概念上定义 data 数据的业务类型:
1、基础数据：不管发生什么 都会加载的数据。
2、业务数据：需要根据 外部参数 或 其他判断 再决定加载的数据。

constructor 加载基础数据，最大化减少因为网络延迟带来的 数据渲染延迟等。
ngOnInit 加载业务数据。

对于非空断言，建议 数据给初始值，避免在数绑定时候做断言处理。
最大化保证组件的健康状态。