2

我是 Angular 6 的新手。我需要通过 API 调用初始化所有下拉字段。很多开发者建议数据初始化的 api 调用应该在 ngOninit 内部完成，而不是通过构造函数来完成？谁能告诉我这背后的原因？

4

2 回答 2

3

这是因为constructor调用 是为了初始化类而不是组件。constructor之前调用过ngOnInit，此时还component没有创建，只有component类被实例化，因此你的依赖被引入，但你的初始化代码不会运行。

为了确保你的初始化代码运行，只需将它放在ngOnInit组件的生命周期钩子方法中，以angular确保组件已成功创建。

于 2018-11-01T06:43:05.787 回答
1

constructor类（或本例中的 TypeScript）上的方法是类本身的特性，而不是 Angular 特性。调用构造函数时，它超出了 Angular 的控制范围

构造函数在创建类的新瞬间时调用，但这并不意味着角完成完成组件和绑定

import { Component, OnInit } from '@angular/core';

@Component({})
class ExampleComponent implements OnInit {
  constructor() {}

  // called on demand by Angular
  ngOnInit() {
    console.log('ngOnInit fired');
  }
}

const instance = new ExampleComponent();

// Angular calls this when necessary
instance.ngOnInit();

请注意，JavaScript 引擎调用构造函数，而不是直接调用 Angular。这就是创建 ngOnInit（和 AngularJS 中的 $onInit）生命周期钩子的原因。

ngOnInit纯粹是为了给我们一个信号，表明 Angular 已经完成了对组件的初始化。

此阶段包括针对我们可能绑定到组件本身的属性的更改检测的第一遍——例如使用@Input()装饰器。

因此，@Input() 属性在 ngOnInit 中可用，但undefined在构造函数中

ngOnInit 生命周期钩子保证您的绑定随时可用。

来自文档

在 Angular 首次显示数据绑定属性并设置指令/组件的输入属性后初始化指令/组件。在第一个 ngOnChanges() 之后调用一次。

生命周期顺序

  1. ngOnChanges()
  2. ngOnInit()
  3. ngDoCheck()
  4. ngAfterContentInit()
  5. ngAfterContentChecked()
  6. ngAfterViewInit()
  7. ngAfterViewChecked()

toddmotto - Angular 构造函数与 ngOnInit

Angular中Constructor和ngOnInit的本质区别

于 2018-11-01T06:49:04.603 回答