为什么在 angular2 中的构造函数中编写初始化逻辑不是一个好习惯

Question

为什么我们只在OnInit()方法中写初始化逻辑，而不在构造方法中？使用构造函数方法进行初始化的所有副作用是什么？请解释。

Answer 1

来自 Angular 文档 (found here)：

Use ngOnInit() for two main reasons:

To perform complex initializations shortly after construction. To set up the component after Angular sets the input properties. Experienced developers agree that components should be cheap and safe to construct.

Don't fetch data in a component constructor. You shouldn't worry that a new component will try to contact a remote server when created under test or before you decide to display it. Constructors should do no more than set the initial local variables to simple values.

An ngOnInit() is a good place for a component to fetch its initial data.

Mike Hevery（Angular 团队负责人）的一篇文章说得更多 here

构造函数用于创建 class 而 onInit 用于构建组件本身。虽然我自己从未经历过这种情况，但显然可能是资源在构造函数中不完全可用

这个article，虽然有点简单，但有很多话要说，但不是官方Angular文档

根据我的经验，虽然我将构造函数代码保持在最低限度，但我从未遇到过代码失败运行或导致问题的问题，因为它在构造函数中而不是 onInit 方法中。

Answer 2

构造函数中未处理的错误将逃逸调用堆栈，并强制堆栈帧向上跳到调用堆栈的第一个错误处理程序。当前调用堆栈上仍在构建的任何父组件也将崩溃。

@Component({..})
export class ExampleComponent implements OnDestroy {
   public constructor() {
      throw new Error("I crash the app!");
   }

   public ngOnDestroy() {
      console.error('I am never executed!');
   }
}

OnInit() 方法发生在 Angular 渲染循环的摘要循环中，并且独立于父组件被调用。此处未处理的错误只会逃脱当前组件的摘要，父组件将继续工作而不会中断。

@Component({..})
export class ExampleComponent implements OnInit, OnDestroy {
   public ngOnInit() {
      throw new Error("I crash gracefully!");
   }

   public ngOnDestroy() {
      console.log('I am still executed!');
   }
}

错误发生的位置会影响组件的生命周期。如果ngOnInit出错，ngOnDestroy方法将继续工作，但如果构造函数出错，组件将完全丢失。

为什么在 angular2 中的构造函数中编写初始化逻辑不是一个好习惯

Why is it not a good practice to write initialization logic in the constructor in angular 2

constructor

ngoninit

angular