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

Question

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

Answer 1

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

@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方法将继续工作，但如果错误发生在构造函数中，组件将完全丢失。