自习室.25 | Angular constructor 和 ngOnInit 有什么区别?

这是 Angular 技术面试中经常问到的基础问题，简单回答就是 constructor 构造函数用来bia依赖项和初始化成员，而在 ngOnInit 中编写逻辑。

为什么不能够将服务或者业务逻辑写在 constructor 构造函数中？这是因为我们的业务逻辑代码需要等待所有的依赖项和组件都被加载，不然会出现值找不到的情况。

constructor(    private fb: FormBuilder,    public userState: UserState,    private router: Router,    private apiService: ApiService,    public screenState: ScreenState,    private titleService: TitleService,    private appState: AppState,    public branding: BrandingState) {}
  ngOnInit(): void {    this.titleService.setTitle('欢迎登录！');    this.userForm = this.fb.group({      name: ['', Validators.required],      pass: ['', Validators.required],    });
    this.userState.user$.subscribe((user) => {      if (user.authenticated) {        setTimeout(() => {          this.router.navigate([this.appState.config.loginRedirect]);        }, 2000);      }    });  }

• constructor 构造函数并不专属于 Angular，它是 JavaScript 的一个类；
• constructor 是编写依赖项最合适的地方，初始化成员操作；
• Angular 组件初始化的时候，会自动执行 constructor 构造函数；
• 只能通过 constructor 注入服务；

• ngOnInit 是一个声明周期的钩子；

• 当 Angular 第一次显示数据绑定和设置指令或者组件的输入属性之后函数执行的地方；
• 执行业务逻辑最合适的地方；
• ngOnInit 只会被调用一次；