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

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


当前回答

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

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

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

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

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

其他回答

构造函数在类实例化时执行。它与棱角无关。这是Javascript的特性,Angular无法控制它

ngOnInit是Angular特有的,当Angular用所有输入属性初始化组件时,它会被调用

@Input属性在ngOnInit生命周期钩子下可用。这将帮助你做一些初始化的事情,比如从后端服务器获取数据等显示在视图中

@Input属性在构造函数中显示为未定义

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

类级变量

通常,您将在这里声明将在组件的其余部分中使用的所有变量。如果值不依赖于其他任何东西,可以初始化它们,或者如果它们不会改变,则使用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框架,并且需要与特定的生命周期事件交互,请使用框架提供的方法来避免问题。

第一个(构造函数)与类实例化有关,与Angular2无关。构造函数可以用在任何类上。您可以在其中放入一些新创建实例的初始化处理。

第二个对应于Angular2组件的生命周期钩子:

引用自angular官方网站:

当输入或输出绑定值发生变化时调用ngOnChanges 在第一个ngOnChanges之后调用ngOnInit

所以如果初始化处理依赖于组件的绑定(例如用@Input定义的组件参数),你应该使用ngOnInit,否则构造函数就足够了…

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

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

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

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

构造函数是Typescript类提供的默认方法,专门用于初始化类成员,通常用于依赖注入服务,如上面的示例代码,或定时器初始化,套接字连接初始化

export class AppComponent {
  title = 'angular-fork-join';
  constructor(private http: HttpClient) {}

ngOnInit:是Angular提供的一个生命周期钩子,在组件初始化时调用,专门用于业务逻辑、数据初始化、API调用等。,演示API调用的示例代码:

export class HomeComponent implements OnInit {

  products = [];

  constructor(private dataService: DataService) { }

  ngOnInit() {

    this.dataService.sendGetRequest().subscribe((data: any[])=>{
      console.log(data);
      this.products = data;
    })  
  }

}