閱讀(2k) 書簽贊(0) 我要糾錯

Angular9 以根模塊啟動應用

2020-07-02 16:15 更新

先決條件

對下列知識有基本的了解：

JavaScript 模塊與 NgModules。

啟動過程

NgModule 用于描述應用的各個部分如何組織在一起。每個應用有至少一個 Angular 模塊，根模塊就是你用來啟動此應用的模塊。按照慣例，它通常命名為 AppModule。

當你使用 Angular CLI 命令 ng new 生成一個應用時，其默認的 AppModule 是這樣的：

/* JavaScript imports */
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';


import { AppComponent } from './app.component';


/* the AppModule class with the @NgModule decorator */
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在 import 語句之后，是一個帶有 @NgModule 裝飾器的類。

@NgModule 裝飾器表明 AppModule 是一個 NgModule 類。 @NgModule 獲取一個元數(shù)據(jù)對象，它會告訴 Angular 如何編譯和啟動本應用。

declarations —— 該應用所擁有的組件。

imports —— 導入 BrowserModule 以獲取瀏覽器特有的服務，比如 DOM 渲染、無害化處理和位置（location）。

providers —— 各種服務提供者。

bootstrap —— 根組件，Angular 創(chuàng)建它并插入 index.html 宿主頁面。

Angular CLI 創(chuàng)建的默認應用只有一個組件 AppComponent，所以它會同時出現(xiàn)在 declarations 和 bootstrap 數(shù)組中。

declarations 數(shù)組

該模塊的 declarations 數(shù)組告訴 Angular 哪些組件屬于該模塊。當你創(chuàng)建更多組件時，也要把它們添加到 declarations 中。

每個組件都應該（且只能）聲明（declare）在一個 NgModule 類中。如果你使用了未聲明過的組件，Angular 就會報錯。

declarations 數(shù)組只能接受可聲明對象?？陕暶鲗ο蟀ńM件、指令和管道。一個模塊的所有可聲明對象都必須放在 declarations 數(shù)組中。可聲明對象必須只能屬于一個模塊，如果同一個類被聲明在了多個模塊中，編譯器就會報錯。

這些可聲明的類在當前模塊中是可見的，但是對其它模塊中的組件是不可見的 —— 除非把它們從當前模塊導出，并讓對方模塊導入本模塊。

下面是哪些類可以添加到 declarations 數(shù)組中的例子：

declarations: [
  YourComponent,
  YourPipe,
  YourDirective
],

每個可聲明對象都只能屬于一個模塊，所以只能把它聲明在一個 @NgModule 中。當你需要在其它模塊中使用它時，就要在那里導入包含這個可聲明對象的模塊。

只有 @NgModule 可以出現(xiàn)在 imports 數(shù)組中。

通過 @NgModule 使用指令

使用 declarations 數(shù)組聲明指令。在模塊中使用指令、組件或管道的步驟如下：

從你編寫它的文件中導出它。

把它導入到適當?shù)哪K中。

在 @NgModule 的 declarations 數(shù)組中聲明它。

這三步的結(jié)果如下所示。在你創(chuàng)建指令的文件中導出它。下面的例子中，"item.directive.ts" 中的 ItemDirective 是 CLI 自動生成的默認指令結(jié)構(gòu)。

Path："src/app/item.directive.ts" 。

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


@Directive({
  selector: '[appItem]'
})
export class ItemDirective {
// code goes here
  constructor() { }


}

重點在于你要先在這里導出它才能在別處導入它。接下來，使用 JavaScript 的 import 語句把它導入到 NgModule 中（這里是 "app.module.ts"）。

Path："src/app/app.module.ts" 。

import { ItemDirective } from './item.directive';

同樣在這個文件中，把它添加到 @NgModule 的 declarations 數(shù)組中：

Path："src/app/app.module.ts" 。

declarations: [
  AppComponent,
  ItemDirective
],

現(xiàn)在，你就可以在組件中使用 ItemDirective 了。這個例子中使用的是 AppModule，但是在特性模塊中你也可以這么做。

注：

組件、指令和管道都只能屬于一個模塊。你在應用中也只需要聲明它們一次，因為你還可以通過導入必要的模塊來使用它們。這能節(jié)省你的時間，并且?guī)椭愕膽帽３志啞?/li>

imports 數(shù)組

模塊的 imports 數(shù)組只會出現(xiàn)在 @NgModule 元數(shù)據(jù)對象中。它告訴 Angular 該模塊想要正常工作，還需要哪些模塊。

列表中的模塊導出了本模塊中的各個組件模板中所引用的各個組件、指令或管道。在這個例子中，當前組件是 AppComponent，它引用了導出自 BrowserModule、FormsModule 或 HttpClientModule 的組件、指令或管道。總之，組件的模板中可以引用在當前模塊中聲明的或從其它模塊中導入的組件、指令、管道。