Angular 8 中构造函数和 ngOnInit 的区别

我们可以使用 Angular 中的许多生命周期函数来创建健壮的应用程序。作为事件的响应，构造函数和 ngOnInit 在开发应用程序中扮演着重要的角色。构造函数和 ngOnInit 这两个术语经常让我们感到困惑。

构造函数和ngOnInit都来自组件的生命周期钩子。这将为我们开发应用程序带来巨大的好处。

让我们看看下面的区别。在此之前，让我们详细讨论一下构造函数和 ngOnInit。

什么是 Angular 8 中的构造函数？

构造函数是类的默认方法，每当我们创建新对象时都会调用它。它通常用于初始化类成员，并确保类及其子部分中角色的正确执行。

Angular 的依赖注入会分析构造函数参数。当通过调用 new class() 创建一个特性时，它会尝试查找与构造函数参数匹配的提供者。然后解析它们并将它们传递给相应的组件。

我们可以使用构造函数作为默认构造函数，这意味着它没有参数。我们可以使用带有私有类作为参数的构造函数。我们可以注入我们的类，并将这些类定义为构造函数的参数。因此，它将创建这些类的实例。

让我们看看下面的例子。

首先使用命令创建一个项目，例如：

ng create new ProjectName

默认构造函数

默认构造函数是没有参数的构造函数。

示例

将以下代码写入app.component.ts并运行项目。

import { Component } from "@angular/core";
@Component({
   selector: "app-root",
   templateUrl: "./app.component.html",
   styleUrls: ["./app.component.css"]
})
export class AppComponent {
   messageFromConstructor: string = "";
   constructor() {
      this.messageFromConstructor = "Constructor called";
   }
}

在app.component.html文件中，编写如下代码：

<p>Constructor</p>
<p>{{messageFromConstructor}}</p>

输出

Constructor
Constructor called

示例

假设我们有一些服务、组件或任何模块要在我们的组件中使用。注入该文件并在构造函数中分配参数以使用它。

创建一个服务文件"./app/sampleService.ts"。编写如下代码：

import { Injectable } from "@angular/core";
@Injectable()
export class SampleService {
   constructor() {}
   showMessage() {
      return "Message from angular service";
   }
}

在主模块即app.module.ts文件中导入服务，例如：

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";
import { SampleService } from "./sampleService";
@NgModule({
   declarations: [AppComponent],
   imports: [BrowserModule],
   providers: [SampleService],
   bootstrap: [AppComponent]
})
export class AppModule {}

现在，在我们的组件即app.component.ts文件中注入创建的服务。例如：

import { Component } from "@angular/core";
import { SampleService } from "./sampleService";
@Component({
   selector: "app-root",
   templateUrl: "./app.component.html",
   styleUrls: ["./app.component.css"]
})
export class AppComponent {
   messageFromConstructor: string;
   constructor(private readonly sampleService: SampleService) {
      this.messageFromConstructor = this.sampleService.showMessage();
   }
}

在这里，我们导入了服务类并将服务作为构造函数的参数注入。

现在，编写代码来显示数据，即app.component.html

<p>Constructor</p>
<p>{{messageFromConstructor}}</p>

输出

Constructor
Message from angular service

什么是 ngOnInit() 函数？

ngOnInit() 是 Angular 管理的生命周期钩子，它被调用以表明 Angular 创建了一个组件。实际的业务逻辑在此方法中执行。我们需要导入 OnInit 来使用此方法。

使用命令创建一个项目，例如：

ng create new projectName

示例

现在，在app.component.ts文件中，编写如下代码：

import { Component, OnInit } from "@angular/core";
@Component({
   selector: "app-root",
   templateUrl: "./app.component.html",
   styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
   messageFromConstructor: string = "";
   messageFromOnInIt: string = "";
   constructor() {
      this.messageFromConstructor = "Constructor called";
   }
   ngOnInit() {
      this.messageFromOnInIt = "ngOnInit called!!";
   }
}

现在，在 app.component.html 文件中。编写如下代码：

<p>Constructor</p>
<p>{{messageFromConstructor}}</p>
<p>NgOnInIt</p>
<p>{{messageFromOnInIt}}</p>

输出

Constructor
Constructor called
NgOnInIt
ngOnInIt called!!

当 Angular 完成组件创建后，将执行 ngOnInit()。此方法在构造函数之后以及第一次 ngOnChanges 之后调用。

构造函数和 ngOnInit() 的区别

下表重点介绍了构造函数和 ngOnInit 的主要区别：

构造函数

ngOnInit

它是 TypeScript 特性，与 Angular 无关。

它是 Angular 组件的生命周期钩子之一。

构造函数被转换为一个与创建的类同名的函数。

它被添加到创建的类的原型中。

由 JS 引擎调用。

由 Angular 调用。

用于注入依赖项。

用于编写业务逻辑。

在创建类对象时调用。

在 Angular 完成组件创建时调用。

结论

构造函数用于初始化类。它与 HTML DOM 元素没有任何关联。ngOnInit() 用于编写业务逻辑。使用 ngOnInit()，我们可以对 HTML DOM 元素执行操作。因为它是在整个组件创建后调用的。

更新于：2023年2月21日

9K+ 次浏览

启动你的职业生涯

通过完成课程获得认证

开始学习
广告