angular4中ngOnInit与contrutor的用法详解

Posted on

想必大家都不陌生constructor构造函数,这是ES6中引入的
在angulaur中constructor一般的作用，我们会再其中依赖注入,初始化默认值等操作。

ngOnInit

ngOnInit 用于在 Angular 获取输入属性后初始化组件，该钩子方法会在第一次 ngOnChanges 之后被调用
注意: 该钩子只会被调用一次.

parent.component.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 import { Component } from "@angular/core";

 @Component({
    selector: 'exe-parent'
})
export class ParentComponent {

    private name: '';

    constructor() {
        this.name = 'LiMing';
    }

    ngOnInit() {

    }
}

child.component.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { Component, Input, OnInit } from "@angular/core";

@Component({
    selector: 'exe-child'
})
export class ChildComponent implements OnInit {
    @Input()
    pname: string; // 父组件的名称

    constructor() {
        console.log('constructor \' + this.pname) // undefined
    }

    ngOnInit () {
        console.log('ngOnInit \' + this.pname) // LiMing
    }
}

我们发现在 ChildComponent 构造函数中，是无法获取输入属性的值，而在 ngOnInit 方法中，我们能正常获取输入属性的值。因为 ChildComponent 组件的构造函数会优先执行，当 ChildComponent 组件输入属性变化时会自动触发 ngOnChanges 钩子，然后在调用 ngOnInit 钩子方法，所以在 ngOnInit 方法内能获取到输入的属性。

constructor应用场景

依赖注入，初始化值

ngOnInit 应用场景

在组件获取输入属性之后，需执行组件初始化操作

总结:

在 Angular 4 中 constructor 一般用于依赖注入或执行简单的数据初始化操作，ngOnInit 钩子主要用于执行组件的其它初始化操作或获取组件输入的属性值

0%