Angular 6 - 模組

Angular 中的模組是指你可以對與應用程式相關聯的元件、指令、管道和服務進行分組的地方。

如果你在開發一個網站，那麼頁首、頁尾、左側、中間和右側部分將成為模組的一部分。

要定義模組，我們可以使用NgModule。當你使用 Angular -cli 命令建立一個新專案時，預設會在 app.module.ts 檔案中建立 ngmodule，如下所示-

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

需要匯入 NgModule，如下所示 -

import { NgModule } from '@angular/core';

ngmodule 的結構如下所示-

@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})

它以 @NgModule 開頭，包含一個具有宣告、匯入、提供程式和載入程式的物件。

宣告

它是一個由建立的元件組成的陣列。如果建立了任何新元件，它將首先匯入，並如下所示將引用包含在宣告中 -

declarations: [
   AppComponent,
   NewCmpComponent
]

匯入

它是一個模組陣列，要求在應用程式中使用。它還可以被宣告陣列中的元件使用。例如，現在我們在 @NgModule 中看到匯入了瀏覽器模組。如果你的應用程式需要表單，你可以按如下方式包含模組-

import { FormsModule } from '@angular/forms';

在@NgModule中的匯入將如下所示 -

imports: [
   BrowserModule,
   FormsModule
]

提供程式

這將包括建立的服務。

載入程式

這包括用於啟動執行的主要應用程式元件。