Angular默认提供了生命周期钩子ngOnInit。

为什么要使用ngOnInit,如果我们已经有一个构造函数?


当前回答

这里需要注意两点:

每当该类创建对象时,都会调用构造函数。 一旦组件创建,就调用ngOnInit。

两者都有不同的可用性。

其他回答

我将添加一个重要的东西,在上面的解释中被跳过,并解释什么时候你必须使用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
  }
}

两种方法都有不同的目标/职责。构造函数(这是语言支持的特性)的任务是确保表示不变量成立。否则,通过给成员正确的值来确保实例是有效的。“正确”的含义由开发者决定。

onInit()方法(这是一个angular概念)的任务是允许在正确的对象上调用方法(表示不变)。每个方法都应该依次确保在方法终止时表示不变量保持不变。

构造函数应该用来创建“正确的”对象,onInit方法让你有机会在一个定义良好的实例中调用方法调用。

上面的答案并没有真正回答最初问题的这一方面:什么是生命周期钩子?我花了一段时间才明白这意味着什么,直到我这样想。

1)假设你的组件是一个人。人类的生命包括许多阶段,然后我们就会死去。

2)我们的人类组件可以有以下生命周期脚本:出生,婴儿,小学,青年,中年成人,老年人,死亡,处理。

3)假设你想有一个功能来创造孩子。为了避免这个问题变得复杂,并且相当滑稽,您希望您的函数只在人类组件生命的Young Adult阶段被调用。所以你开发了一个组件,它只在父母组件处于年轻成人阶段时才活跃。钩子通过发出生命阶段的信号并让组件对其进行操作来帮助您做到这一点。

有趣的东西。如果你让你的想象力去实际编码这样的东西,它会变得复杂而有趣。

这里需要注意两点:

每当该类创建对象时,都会调用构造函数。 一旦组件创建,就调用ngOnInit。

两者都有不同的可用性。

像许多其他语言一样,可以在类级、构造函数或方法上初始化变量。这取决于开发人员来决定在他们的特定情况下什么是最好的。但下面是在做决定时的最佳实践清单。

类级变量

通常,您将在这里声明将在组件的其余部分中使用的所有变量。如果值不依赖于其他任何东西,可以初始化它们,或者如果它们不会改变,则使用const关键字创建常量。

export class TestClass{
    let varA: string = "hello";
}

构造函数

通常,最好的做法是在构造函数中不做任何事情,只将它用于将要被注入的类。大多数时候你的构造函数应该是这样的:

   constructor(private http: Http, private customService: CustomService) {}

这将自动创建类级变量,因此您将可以访问customService.myMethod(),而不必手动执行。

NgOnInit

NgOnit是Angular 2框架提供的一个生命周期钩子。你的组件必须实现OnInit才能使用它。这个生命周期钩子在构造函数被调用并初始化所有变量之后被调用。大部分初始化工作应该放在这里。你将确信Angular已经正确地初始化了你的组件,并且你可以开始在OnInit中执行任何你需要的逻辑,而不是在你的组件还没有正确加载完成的时候进行操作。

下面是一张详细说明调用顺序的图片:

https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html

TLDR

如果你正在使用Angular 2框架,并且需要与特定的生命周期事件交互,请使用框架提供的方法来避免问题。