ngOnInit和constructor怎么在Angular中使用-创新互联

ngOnInit和constructor怎么在Angular 中使用?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

在黔西南州等地区,都构建了全面的区域性战略布局,加强发展的系统性、市场前瞻性、产品创新能力,以专注、极致的服务理念,为客户提供成都做网站、成都网站建设 网站设计制作定制网站开发,公司网站建设,企业网站建设,成都品牌网站建设,全网整合营销推广,外贸网站制作,黔西南州网站建设费用合理。

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: `
  

Welcome to Angular World

 `, }) 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: `
  

Welcome to Angular World

  

Hello {{name}}

      `, }) 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: `
   

父组件的名称:{{pname}} 

  ` }) 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: `
  

Welcome to Angular World

  

Hello {{name}}

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

看完上述内容,你们掌握ngOnInit和constructor怎么在Angular 中使用的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联网站建设公司行业资讯频道,感谢各位的阅读!

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


新闻标题:ngOnInit和constructor怎么在Angular中使用-创新互联
本文地址:http://myzitong.com/article/jcioo.html