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+ 次瀏覽

啟動你的職業生涯

透過完成課程獲得認證

開始學習
廣告
© . All rights reserved.