Angular默认提供了生命周期钩子ngOnInit。
为什么要使用ngOnInit,如果我们已经有一个构造函数?
Angular默认提供了生命周期钩子ngOnInit。
为什么要使用ngOnInit,如果我们已经有一个构造函数?
当前回答
Constructor()用于进行依赖注入。
ngOnInit(), ngOnChanges()和ngOnDestroy()等都是生命周期方法。ngOnChanges()将是第一个被调用的,在ngOnInit()之前,当绑定属性的值发生变化时,如果没有变化,它将不会被调用。ngOnDestroy()在移除组件时被调用。要使用它,OnDestroy需要由类实现。
其他回答
构造函数()可以接受参数并用于依赖注入,构造函数()用于添加服务对象。
构造函数在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()。
我将添加一个重要的东西,在上面的解释中被跳过,并解释什么时候你必须使用ngOnInit。
如果你通过ViewChildren, ContentChildren或ElementRef对组件的DOM进行任何操作,你的原生元素在构造函数阶段将不可用。
然而,由于ngOnInit发生在组件被创建和检查(ngOnChanges)被调用之后,你可以在这一点上访问DOM。
export class App implements OnInit, AfterViewInit, AfterContentInit {
@Input() myInput: string;
@ViewChild() myTemplate: TemplateRef<any>;
@ContentChild(ChildComponent) myComponent: ChildComponent;
constructor(private elementRef: ElementRef) {
// this.elementRef.nativeElement is undefined here
// this.myInput is undefined here
// this.myTemplate is undefined here
// this.myComponent is undefine here
}
ngOnInit() {
// this.elementRef.nativeElement can be used from here on
// value of this.myInput is passed from parent scope
// this.myTemplate and this.myComponent are still undefined
}
ngAfterContentInit() {
// this.myComponent now gets projected in and can be accessed
// this.myTemplate is still undefined
}
ngAfterViewInit() {
// this.myTemplate can be used now as well
}
}
上面的答案并没有真正回答最初问题的这一方面:什么是生命周期钩子?我花了一段时间才明白这意味着什么,直到我这样想。
1)假设你的组件是一个人。人类的生命包括许多阶段,然后我们就会死去。
2)我们的人类组件可以有以下生命周期脚本:出生,婴儿,小学,青年,中年成人,老年人,死亡,处理。
3)假设你想有一个功能来创造孩子。为了避免这个问题变得复杂,并且相当滑稽,您希望您的函数只在人类组件生命的Young Adult阶段被调用。所以你开发了一个组件,它只在父母组件处于年轻成人阶段时才活跃。钩子通过发出生命阶段的信号并让组件对其进行操作来帮助您做到这一点。
有趣的东西。如果你让你的想象力去实际编码这样的东西,它会变得复杂而有趣。
第一个(构造函数)与类实例化有关,与Angular2无关。构造函数可以用在任何类上。您可以在其中放入一些新创建实例的初始化处理。
第二个对应于Angular2组件的生命周期钩子:
引用自angular官方网站:
当输入或输出绑定值发生变化时调用ngOnChanges 在第一个ngOnChanges之后调用ngOnInit
所以如果初始化处理依赖于组件的绑定(例如用@Input定义的组件参数),你应该使用ngOnInit,否则构造函数就足够了…