ngOnInit和constructor怎么在Angular中使用
ngOnInit和constructor怎么在Angular 中使用?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
十余年的苍南网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。全网整合营销推广的优势是能够根据用户设备显示端的尺寸不同,自动调整苍南建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。创新互联从事“苍南网站设计”,“苍南网站推广”以来,每个客户项目都认真落实执行。
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
ngOnInit
是Angular
中OnInit
钩子的实现。用来初始化组件。
Angular中生命周期钩子的调用顺序如下:
ngOnChanges -- 当被绑定的输入属性的值发生变化时调用,首次调用一定会发生在ngOnInit()之前。
ngOnInit() -- 在Angular第一次显示数据绑定和设置指令/组件的输入属性之后,初始化指令/组件。在第一轮ngOnChanges()完成之后调用,只调用一次。
ngDoCheck -- 自定义的方法,用于检测和处理值的改变。
ngAfterContentInit -- 在组件内容初始化之后调用,只适用于组件
ngAfterContentChecked -- 组件每次检查内容时调用,只适用于组件
ngAfterViewInit -- 组件相应的视图初始化之后调用,只适用于组件
ngAfterViewChecked -- 组件每次检查视图时调用,只适用于组件
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 中使用的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联行业资讯频道,感谢各位的阅读!
文章名称:ngOnInit和constructor怎么在Angular中使用
当前地址:http://myzitong.com/article/gjcheh.html