欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

详解Angular 中 ngOnInit 和 constructor 使用场景

程序员文章站 2022-06-24 17:18:12
1. constructor constructor应该是es6中明确使用constructor来表示构造函数的,构造函数使用在class中,用来做初始化操作。当包含co...

1. constructor

constructor应该是es6中明确使用constructor来表示构造函数的,构造函数使用在class中,用来做初始化操作。当包含constructor的类被实例化时,构造函数将被调用。

来看例子:

class appcomponent {
  public name: string;
  constructor(name) {
    console.log('constructor initialization');
    this.name = name;
  }
}

let appcmp = new appcomponent('appcmp');  // 这时候构造函数将被调用。
console.log(appcmp.name);

转成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);

2. ngoninit

ngoninitangularoninit钩子的实现。用来初始化组件。

angular中生命周期钩子的调用顺序如下:

  1. ngonchanges -- 当被绑定的输入属性的值发生变化时调用,首次调用一定会发生在ngoninit()之前。
  2. ngoninit() -- 在angular第一次显示数据绑定和设置指令/组件的输入属性之后,初始化指令/组件。在第一轮ngonchanges()完成之后调用,只调用一次。
  3. ngdocheck -- 自定义的方法,用于检测和处理值的改变。
  4. ngaftercontentinit -- 在组件内容初始化之后调用,只适用于组件
  5. ngaftercontentchecked -- 组件每次检查内容时调用,只适用于组件
  6. ngafterviewinit -- 组件相应的视图初始化之后调用,只适用于组件
  7. ngafterviewchecked -- 组件每次检查视图时调用,只适用于组件
  8. ngondestroy -- 当angular每次销毁指令/组件之前调用并清扫。在这儿反订阅可观察对象和分离事件处理器,以防内存泄漏。

在angular销毁指令/组件之前调用。

了解了这些之后我们来看一个例子:

import { component, oninit } from '@angular/core';

@component({
 selector: 'my-app',
 template: `
  <h1>welcome to angular world</h1>
 `,
})
export class appcomponent implements oninit {

 constructor() {
  console.log('constructor initialization');
 }

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

这里输出的是:

constructor initialization
ngoninit hook has been called

可以看出,constructor的执行是在先的。

那么既然ngonchanges是输入属性值变化的时候调用,并且ngoninit是在ngonchanges执行完之后才调用,而constructor是在组件就实例化的时候就已经调用了,这也就是说,在constructor中我们是取不到输入属性的值的。
所以还是看例子:

// 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 = 'god eyes';
 }
}

// 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); // this.name=undefined
  }

  ngoninit() {
    console.log('childcomponent ngoninit', this.pname); // this.name=god eyes
  }
}

一目了然。

3. 应用场景

看完的上面的部分可以发现,在constructor中不适合进行任何与组件通信类似的复杂操作,一般在constructor中值进行一些简单的初始化工作:依赖注入,变量初始化等。

那么用到组件间通信的方法我们可以放在ngoninit中去执行,比如异步请求等:

import { component, elementref, oninit } from '@angular/core';

@component({
 selector: 'my-app',
 template: `
  <h1>welcome to angular world</h1>
  <p>hello {{name}}</p>
 `,
})
export class appcomponent implements onint {
 name: string = '';

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

 ngoninit() {
  this.gotid = this.activatedroute.params.subscribe(params => this.articleid = params['id']);
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。