Question

我是Angular 6的新手。我有一个需求，我需要通过API调用初始化所有下拉字段。许多开发人员建议对数据初始化的api调用应该在ngOninit内部完成，而不是通过构造函数完成？有人可以让我知道其背后的原因吗？

Answer 1

这是因为调用val df = spark.read .format("jdbc") .option("driver", "oracle.jdbc.driver.OracleDriver") .option("url", "jdbc:oracle:thin:@**:1521:**") .option("user", "**") .option("password", "**") .option("dbtable", "table_name") .load()来初始化类，而不是来初始化组件。 constructor在constructor之前被调用，此时尚未创建ngOnInit，仅实例化了component类，因此引入了您的依赖关系，但是您的初始化代码将无法运行。

要确保您的初始化代码运行，只需将其放入component中组件的生命周期挂钩方法ngOnInit中，以确保成功创建了该组件。

Answer 2

类（在这种情况下为TypeScript）上的

constructor方法是类本身的功能，而不是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（）之后调用一次。

Lifecycle sequence

ngOnChanges（）
ngOnInit（）
ngDoCheck（）
ngAfterContentInit（）
ngAfterContentChecked（）
ngAfterViewInit（）
ngAfterViewChecked（）

toddmotto - Angular constructor versus ngOnInit

The essential difference between Constructor and ngOnInit in Angular

为什么不应该在Angular组件的构造函数中完成数据初始化？

2 个答案: