详解Angular 中 ngOnInit 和 constructor 使用场景

作者:Keriy 时间:2024-05-11 09:18:05 

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']);
}
}

来源:http://www.jianshu.com/p/af1d8f597b29

标签:angular,constructor,ngOnInit
0
投稿

猜你喜欢

  • Python 3.x基于Xml数据的Http请求方法

    2021-05-17 23:45:18
  • Golang如何交叉编译各个平台的二进制文件详解

    2024-05-22 17:48:47
  • Mysql使用Describe命令判断字段是否存在

    2011-04-25 18:27:00
  • VUE+Express+MongoDB前后端分离实现一个便签墙

    2024-05-13 09:11:56
  • 了解WEB页面工具语言XML(三)支持工具

    2008-09-05 17:18:00
  • 拯救你的数据 通过日志恢复MSSQL数据

    2024-01-16 13:36:10
  • 让ThinkPHP的模板引擎达到最佳效率的方法详解

    2023-11-14 17:06:40
  • vue实现动态路由详细

    2024-05-05 09:25:19
  • 一文学会Mysql数据库备份与恢复

    2024-01-26 10:17:08
  • 在macOS上搭建python环境的实现方法

    2021-10-07 07:29:56
  • asp金额大小写转换完全无错版

    2007-09-26 09:38:00
  • 深入理解PyTorch中的nn.Embedding的使用

    2023-01-25 11:54:02
  • Python查看Tensor尺寸及查看数据类型的实现

    2023-06-06 15:24:54
  • FSO读取BMP,JPG,PNG,GIF图像文件信息的函数

    2007-08-04 09:56:00
  • python如何把嵌套列表转变成普通列表

    2023-08-20 14:28:19
  • 30分钟就入门的正则表达式基础教程

    2024-05-13 10:37:40
  • python中实现数组和列表读取一列的方法

    2021-04-07 08:04:48
  • 最新CSS兼容方案

    2008-08-13 13:20:00
  • Go语言的Channel遍历方法详解

    2023-09-24 07:50:08
  • 3行Python代码实现图像照片抠图和换底色的方法

    2021-12-11 04:57:35
  • asp之家 网络编程 m.aspxhome.com