Angular2 constructor VS ngOnInit
constructor和ngOnInit钩子有什么不同? constructorconstructor(构造函数)是ES6类或TypeScript类中的特殊方法,而不是Angular的方法,主要用来做初始化操作,在进行类实例化操作是,会被自动调用。通过constructor方法并不能使我们知道Angular何时完成了组件的初始化工作。 仅显示constructor方法: import { Component } @Component({})
<span style="color: #0000ff">class<span style="color: #000000"> ExampleComponent { <span style="color: #008000">//<span style="color: #008000"> this is called by the JavaScript engine <span style="color: #008000">//<span style="color: #008000"> rather than Angular <span style="color: #000000"> constructor(name) { console.log(<span style="color: #800000">'<span style="color: #800000">Constructor initialised<span style="color: #800000">'<span style="color: #000000">); <span style="color: #0000ff">this.name =<span style="color: #000000"> name; } } <span style="color: #008000">//<span style="color: #008000"> internally calls the constructor 运行以上代码,控制台输出结果: constructor方法是由JavaScript引擎调用的,而不是Angular,这就是为什么ngOnInit生命周期钩子被创建的原因。 ngOnInitngOnInit 是 Angular 2 组件生命周期中的一个钩子,Angular 2 中的所有钩子和调用顺序如下:
其中 ngOnInit 用于在 Angular 获取输入属性后初始化组件,该钩子方法会在第一次 ngOnChanges 之后被调用。 另外需要注意的是 ngOnInit 钩子只会被调用一次,我们来看一下具体示例: import { Component,OnInit } @Component({
selector: <span style="color: #800000">'<span style="color: #800000">my-app<span style="color: #800000">'<span style="color: #000000">,template: ` Welcome to Angular WorldHello {{name}} name: <span style="color: #0000ff">string = <span style="color: #800000">''<span style="color: #000000">;constructor() { ngOnInit() { 以上代码运行后,控制台输出结果: 接下来看一个父-子组件传参的例子: parent.component.ts import { Component } @Component({
selector: <span style="color: #800000">'<span style="color: #800000">exe-parent<span style="color: #800000">'<span style="color: #000000">,template: ` Welcome to Angular WorldHello {{name}} <span style="color: #0000ff">this.name = <span style="color: #800000">'<span style="color: #800000">Semlinker<span style="color: #800000">'<span style="color: #000000">; } } child.component.ts import { Component,Input,OnInit } @Component({
selector: <span style="color: #800000">'<span style="color: #800000">exe-child<span style="color: #800000">'<span style="color: #000000">,template: </span><p>父组件的名称:{{pname}} </p><span style="color: #000000"> }) export <span style="color: #0000ff">class<span style="color: #000000"> ChildComponent implements OnInit { @Input() pname: <span style="color: #0000ff">string; <span style="color: #008000">//<span style="color: #008000"> 父组件的名称 <span style="color: #000000"> constructor() { console.log(<span style="color: #800000">'<span style="color: #800000">ChildComponent constructor<span style="color: #800000">',<span style="color: #0000ff">this.pname); <span style="color: #008000">//<span style="color: #008000"> Output:undefined <span style="color: #000000"> }
} 以上代码运行后,控制台输出结果: 我们发现在 ChildComponent 构造函数中,是无法获取输入属性的值,而在 ngOnInit 方法中,我们能正常获取输入属性的值。因为 ChildComponent 组件的构造函数会优先执行,当 ChildComponent 组件输入属性变化时会自动触发 ngOnChanges 钩子,然后在调用 ngOnInit 钩子方法,所以在 ngOnInit 方法内能获取到输入的属性。 在 Angular 2 中,构造函数一般用于依赖注入或执行一些简单的初始化操作。 import { Component,ElementRef } @Component({
selector: <span style="color: #800000">'<span style="color: #800000">my-app<span style="color: #800000">'<span style="color: #000000">,}) export <span style="color: #0000ff">class<span style="color: #000000"> AppComponent { name: <span style="color: #0000ff">string = <span style="color: #800000">''<span style="color: #000000">; constructor(<span style="color: #0000ff">public elementRef: ElementRef) { <span style="color: #008000">//<span style="color: #008000"> 使用构造注入的方式注入依赖对象 在项目开发中我们要尽量保持构造函数简单明了,让它只执行简单的数据初始化操作,因此我们会把其他的初始化操作放在 ngOnInit 钩子中去执行。如在组件获取输入属性之后,需执行组件初始化操作等。 import { Component,OnInit } @Component({}) <span style="color: #0000ff">class<span style="color: #000000"> ExampleComponent implements OnInit { constructor() {} <span style="color: #008000">//<span style="color: #008000"> called on demand by Angular <span style="color: #000000"> ngOnInit() { console.log(<span style="color: #800000">'<span style="color: #800000">ngOnInit fired<span style="color: #800000">'<span style="color: #000000">); } } <span style="color: #0000ff">const instance = <span style="color: #0000ff">new<span style="color: #000000"> ExampleComponent(); <span style="color: #008000">//<span style="color: #008000"> Angular calls this when necessary (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |