📜  AngularJS中的Constructor和ngOnInit有什么区别?

📅  最后修改于: 2021-05-13 18:50:53             🧑  作者: Mango

构造函数:构造函数是安装类时创建的类的默认方法,可确保正确执行类及其子节中的角色。最好使用Angular Dependency Injector(DI),分析构建器的组件,并在通过调用新的MyClass()创建新功能时尝试查找与构建器的参数类型匹配的供应商,解析它们并将它们传递给相似的组件。

new MyClass(someArg);

例子:

var AddNumbers= (function () {
    function AddNumbers(x, y) {
        this.x = x;
        this.y = y;
    }
    AddNumbers.prototype.add = function () {
      return this.x + point.x;
    };
    return AddNumbers;
})();
  
  
var numbers = new AddNumbers(2, 4);
var additionOfNumbers = numbers.add();
console.log(additionOfNumbers);

输出:

6

ngOnInit: OnInit是一个名为Angular的生命周期小部件,用于显示Angular是用来创建组件的。我们必须像这样导入OnInit才能使用它(实际上,不是强制性使用OnInit,但它被认为是很好的)。

句法:

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

并使用它执行OnInit方法,我们应该使用类似以下的部分:

例子:

import { Component, OnInit } from '@angular/core';
  
@Component({
    selector:'app-checkbox',
    templateUrl:'./checkbox.component.html',
    styleUrls: ['./checkbox.component.css']
})
  
export class CheckboxComponent implements OnInit {
    constructor() {
        console.log('Called Constructor');
    }
  
    ngOnInit() {
        console.log('Called ngOnInit method');
    }
}

输出:

Called Constructor
Called ngOnitit method

注意:类应用销售

constructor () {
// First called before ngOnInit ()
}
Oninit () {
// Named after the constructor and named after NgOnChanges()
}

启动admin属性后,使用此交互来应用自定义启动思路。 NGOnInit是在首次对目标站点进行索引之后以及对其任何子级进行测试之前命名的。仅包含一次指南。

ngOnInit和构造方法之间的区别:

  • 我们通常在每次启动/发布时都使用ngOnInit,并避免在构建器中起作用。构造函数应仅用于启动类成员,而不应执行实际的“工作”。
  • 因此,您应该使用constructor()来设置Dependency Injection,并且不要设置太多。 ngOnInit()是一个更好的“起点”,这是解决组件组合的地方。
  • 我们对所有的初始化/声明使用constructor()。
  • 最好避免在构造函数中编写实际的工作。
  • Constructor()仅应用于初始化类成员,而不应执行实际的“工作”。
  • 因此,我们应该使用构造函数()来设置依赖注入,类字段的初始化等。
  • ngOnInit()是编写实例化类后需要执行的“实际工作代码”的更好地方。
  • 就像从数据库加载数据一样-在HTML模板视图中显示用户。此类代码应使用ngOnInit()编写。

结论:

  • 构造函数初始化类成员。
  • ngOnInit()是在实例化类后立即放置我们需要执行的代码的地方。