Angular默认提供了生命周期钩子ngOnInit。
为什么要使用ngOnInit,如果我们已经有一个构造函数?
Angular默认提供了生命周期钩子ngOnInit。
为什么要使用ngOnInit,如果我们已经有一个构造函数?
当前回答
这里需要注意两点:
每当该类创建对象时,都会调用构造函数。 一旦组件创建,就调用ngOnInit。
两者都有不同的可用性。
其他回答
简短而简单的回答是,
构造函数:构造函数是在构造组件时(默认情况下)运行的默认方法。当创建类的实例时,也会调用构造函数(默认方法)。换句话说,当构建组件或/和创建实例时,调用构造函数(默认方法)并调用其中编写的相关代码。基本上,在Angular2中,当组件被构造以供进一步使用时,它被用来注入服务之类的东西。
OnInit: ngOnInit是组件的生命周期钩子,当组件初始化时,它首先在构造函数(默认方法)之后运行。
因此,你的构造函数将首先被调用,Oninit将在构造函数方法之后被调用。
boot.ts
import {Cmomponent, OnInit} from 'angular2/core';
import {ExternalService} from '../externalService';
export class app implements OnInit{
constructor(myService:ExternalService)
{
this.myService=myService;
}
ngOnInit(){
// this.myService.someMethod()
}
}
资源:生命周期钩子
你可以查看这个小演示,它展示了这两件事的实现。
构造函数()可以接受参数并用于依赖注入,构造函数()用于添加服务对象。
构造函数在ngOnint()之前调用;
ngOnInit()用于用必要的服务函数调用操作组件,通常,ngOnInit()中调用服务,而不是在构造函数中调用服务
构造函数是第一个执行的,当@input data为空时有时会发生这种情况! 所以我们使用构造函数注入服务,ngOnInit在后面发生。 构造函数示例:
constructor(translate: TranslateService, private oauthService: OAuthService) {
translate.setDefaultLang('En');
translate.use('En');}
示例ngOnInit:
ngOnInit() {
this.items = [
{ label: 'A', icon: 'fa fa-home', routerLink: ['/'] },
{ label: 'B', icon: 'fa fa-home', routerLink: ['/'] }]
}
我认为ngOnInit就像winForm中的InitialComponents()。
两种方法都有不同的目标/职责。构造函数(这是语言支持的特性)的任务是确保表示不变量成立。否则,通过给成员正确的值来确保实例是有效的。“正确”的含义由开发者决定。
onInit()方法(这是一个angular概念)的任务是允许在正确的对象上调用方法(表示不变)。每个方法都应该依次确保在方法终止时表示不变量保持不变。
构造函数应该用来创建“正确的”对象,onInit方法让你有机会在一个定义良好的实例中调用方法调用。
构造函数是类的默认方法,在类实例化时执行,并确保类及其子类中的字段正确初始化。Angular,或者更好的依赖注入器(DI),会分析构造函数的参数,当它通过调用new MyClass()创建一个新实例时,它会尝试找到与构造函数参数类型匹配的提供程序,解析它们并将它们传递给构造函数
new MyClass(someArg);
ngOnInit是Angular调用的一个生命周期钩子,用来表示Angular已经创建完成了组件。
我们必须像这样导入OnInit才能使用它(实际上实现OnInit不是强制性的,但被认为是好做法):
import { Component, OnInit } from '@angular/core';
然后使用OnInit方法,我们必须像这样实现类:
export class App implements OnInit {
constructor() {
// Called first time before the ngOnInit()
}
ngOnInit() {
// Called after the constructor and called after the first ngOnChanges()
}
}
在初始化指令的数据绑定属性后,实现此接口来执行自定义初始化逻辑。 ngOnInit在指令的数据绑定属性第一次被检查之后被调用, 在它的子代被检查之前。 它只在指令实例化时被调用一次。
大多数情况下,我们使用ngOnInit进行所有的初始化/声明,避免在构造函数中工作。构造函数应该只用于初始化类成员,而不应该做实际的“工作”。
因此,您应该使用构造函数()来设置依赖注入,而不是其他什么。ngOnInit()是更好的“开始”的地方——它是解析组件绑定的地方。
更多信息请参考这里:
https://angular.io/api/core/OnInit Angular组件构造函数Vs OnInit
需要注意的是,@Input值在构造函数中是不可访问的(感谢@tim在注释中提出的建议)