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

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


当前回答

首先,ngOnInit是Angular生命周期的一部分,而constructor是ES6 JavaScript类的一部分,所以主要的区别就是从这里开始的!

请看下面我创建的图表,它展示了Angular的生命周期。

在Angular2+中,我们使用构造函数为我们做DI(依赖注入),而在Angular 1中,它是通过调用String方法并检查注入了哪个依赖。

正如你在上面的图表中看到的,ngOnInit是在构造函数准备好之后发生的,ngOnChnages和在组件为我们准备好之后被触发。所有的初始化都可以在这个阶段进行,一个简单的示例是注入一个服务并在init上初始化它。

好的,我还分享了一个示例代码给你看,看看我们如何在下面的代码中使用ngOnInit和构造函数:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';


@Component({
 selector: 'my-app',
 template: `<h1>App is running!</h1>
  <my-app-main [data]=data></<my-app-main>`,
  styles: ['h1 { font-weight: normal; }']
})
class ExampleComponent implements OnInit {
  constructor(private router: Router) {} //Dependency injection in the constructor
  
  // ngOnInit, get called after Component initialised! 
  ngOnInit() {
    console.log('Component initialised!');
  }
}

其他回答

constructor()是Component生命周期中的默认方法,用于依赖注入。构造函数是一个Typescript特性。

ngOnInit()在构造函数之后被调用,ngOnInit在第一个ngOnChanges之后被调用。

例如:

建设者()-> ngOnChanges() -> ngOnInit()

如上所述,当输入或输出绑定值发生变化时调用ngOnChanges()。

构造函数

每个类都有构造函数,构造函数不是Angular特有的,而是从面向对象设计中派生出来的概念。构造函数创建组件类的实例。

OnInit

ngOnInit函数是Angular组件的生命周期方法之一。Angular组件中的生命周期方法(或钩子)允许你在组件生命的不同阶段运行一段代码。 与构造函数方法不同,ngOnInit方法来自Angular接口(OnInit),组件需要实现该接口才能使用该方法。ngOnInit方法在组件创建后不久被调用。

构造函数是ES6的一部分,typescript使用ES6语法,现在也使用es7语法,所以你可以利用typescript将编译为es5/es4(根据你的定义)的高级功能来提供对旧浏览器的支持。

而ngOnInIt是angular的生命周期钩子。当你的组件被初始化时,它也被初始化。(把它的状态看作是新生的状态)

使用ngOnInIt比较构造函数是明智的,因为你有另一个生命周期钩子,如ngOnDestory(认为它是任何生命的死亡)。在这里,你可以取消订阅任何可观察对象,这有助于防止任何内存泄漏。

如果有任何问题,请随意评论这个答案。

在Angular生命周期中

1) Angular注入器检测构造函数参数和实例化类。

2)下一个角调用生命周期

Angular生命周期钩子

调用指令参数绑定。

开始角渲染…

调用具有角生命周期状态的其他方法。

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

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

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

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

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