Angular constructor vs ngOnInit

栏目: JavaScript · 发布时间: 6年前

内容简介：在 Angular 学习过程中，相信很多初学者对 constructor 和 ngOnInit 的应用场景和区别会存在困惑，本文我们会通过实际的例子，为读者一步步解开困惑。在 ES6 中就引入了类，constructor（构造函数）是类中的特殊方法，主要用来做初始化操作，在进行类实例化操作时，会被自动调用。马上来个例子：以上代码运行后，控制台的输出结果：

在 Angular 学习过程中，相信很多初学者对 constructor 和 ngOnInit 的应用场景和区别会存在困惑，本文我们会通过实际的例子，为读者一步步解开困惑。

constructor

在 ES6 中就引入了类，constructor（构造函数）是类中的特殊方法，主要用来做初始化操作，在进行类实例化操作时，会被自动调用。马上来个例子：

class AppComponent {
  constructor(name) {
    console.log('Constructor initialization');
    this.name = name;
  }
}

let appCmp = new AppComponent('AppCmp');
console.log(appCmp.name);

以上代码运行后，控制台的输出结果：

Constructor initialization
AppCmp

接下来我们看一下转换后的 ES5 代码：

var AppComponent = (function () {
    function AppComponent(name) {
        console.log('Constructor initialization');
        this.name = name;
    }
    return AppComponent;
}());

var appCmp = new AppComponent('AppCmp');
console.log(appCmp.name);

ngOnInit

ngOnInit 是 Angular 组件生命周期中的一个钩子，Angular 中的所有钩子和调用顺序如下：

ngOnChanges —— 当数据绑定输入属性的值发生变化时调用
ngOnInit —— 在第一次 ngOnChanges 后调用
ngDoCheck —— 自定义的方法，用于检测和处理值的改变
ngAfterContentInit —— 在组件内容初始化之后调用
ngAfterContentChecked —— 组件每次检查内容时调用
ngAfterViewInit —— 组件相应的视图初始化之后调用
ngAfterViewChecked —— 组件每次检查视图时调用
ngOnDestroy —— 指令销毁前调用

其中 ngOnInit 用于在 Angular 获取输入属性后初始化组件，该钩子方法会在第一次 ngOnChanges 之后被调用。

另外需要注意的是 ngOnInit 钩子只会被调用一次，我们来看一下具体示例：

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

@Component({
  selector: 'my-app',
  template: `
    <h1>Welcome to Angular World</h1>
    <p>Hello {{name}}</p>
  `,
})
export class AppComponent implements OnInit {
  name: string = '';

  constructor() {
    console.log('Constructor initialization');
    this.name = 'Semlinker';
  }

  ngOnInit() {
    console.log('ngOnInit hook has been called');
  }
}

以上代码运行后，控制台的输出结果：

Constructor initialization
ngOnInit hook has been called

接下来我们再来看一个 父— 子 组件传参的例子：

parent.component.ts

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

@Component({
  selector: 'exe-parent',
  template: `
    <h1>Welcome to Angular World</h1>
    <p>Hello {{name}}</p>
    <exe-child [pname]="name"></exe-child>
  `,
})
export class ParentComponent {
  name: string = '';

  constructor() {
    this.name = 'Semlinker';
  }
}

child.component.ts

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

@Component({
    selector: 'exe-child',
    template: `
     <p>父组件的名称：{{pname}} </p>
    `
})
export class ChildComponent implements OnInit {
    @Input()
    pname: string; // 父组件的名称

    constructor() {
      console.log('ChildComponent constructor', this.pname); // Output：undefined
    }

    ngOnInit() {
      console.log('ChildComponent ngOnInit', this.pname);
    }
}

以上代码运行后，控制台的输出结果：

ChildComponent constructor undefined
ChildComponent ngOnInit Semlinker

我们发现在 ChildComponent 构造函数中，是无法获取输入属性的值，而在 ngOnInit 方法中，我们能正常获取输入属性的值。因为 ChildComponent 组件的构造函数会优先执行，当 ChildComponent 组件输入属性变化时会自动触发 ngOnChanges 钩子，然后在调用 ngOnInit 钩子方法，所以在 ngOnInit 方法内能获取到输入的属性。

constructor 应用场景

在 Angular 中，构造函数一般用于依赖注入或执行一些简单的初始化操作。

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

@Component({
  selector: 'my-app',
  template: `
    <h1>Welcome to Angular World</h1>
    <p>Hello {{name}}</p>
  `,
})
export class AppComponent {
  name: string = '';

  constructor(public elementRef: ElementRef) { // 使用构造注入方式注入依赖对象
    this.name = 'Semlinker'; // 执行数据初始化操作
  }
}

ngOnInit 应用场景

在项目开发中我们要尽量保持构造函数简单明了，让它只执行简单的数据初始化操作，因此我们会把其他的初始化操作放在 ngOnInit 钩子中去执行。如在组件获取输入属性之后，需执行组件初始化操作等。

我有话说

TypeScrip 类静态属性和成员属性的区别

AppComponent.ts

class AppComponent {
  static type: string = 'component';
  name: string;

  constructor() {
    this.name = 'AppComponent';
  }
}

转化后的 ES5 代码：

var AppComponent = (function () {
    function AppComponent() {
        this.name = 'AppComponent';
    }
    return AppComponent;
}());
AppComponent.type = 'component';

通过转换后的代码，我们可以知道类中的静态属性是属于 AppComponent 构造函数的，而成员属性是属于 AppComponent 实例。

以上所述就是小编给大家介绍的《Angular constructor vs ngOnInit》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

Angular constructor vs ngOnInit

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

AI Algorithms, Data Structures, and Idioms in Prolog, Lisp, and

George F. Luger、William A Stubblefield / Addison Wesley / 2008-09-04 / USD 22.20

This book is designed for three primary purposes. The first is as a programming language component of a general class in Artificial Intelligence. From this viewpoint, the authors see as essential that......一起来看看《AI Algorithms, Data Structures, and Idioms in Prolog, Lisp, and 》这本书的介绍吧!

码农工具