值得信赖的彩票平台

Angular9 以根模塊啟動應用

先決條件

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

啟動過程

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 獲取一個元數據對象,它會告訴 Angular 如何編譯和啟動本應用。

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

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

  • providers —— 各種服務提供者。

  • bootstrap —— 根組件,Angular 創建它并插入 index.html 宿主頁面。

Angular CLI 創建的默認應用只有一個組件 AppComponent,所以它會同時出現在 declarationsbootstrap 數組中。


declarations 數組

該模塊的 declarations 數組告訴 Angular 哪些組件屬于該模塊。 當你創建更多組件時,也要把它們添加到 declarations 中。

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

declarations 數組只能接受可聲明對象。可聲明對象包括組件、指令和管道。 一個模塊的所有可聲明對象都必須放在 declarations 數組中。 可聲明對象必須只能屬于一個模塊,如果同一個類被聲明在了多個模塊中,編譯器就會報錯。

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

下面是哪些類可以添加到 declarations 數組中的例子:

declarations: [
  YourComponent,
  YourPipe,
  YourDirective
],

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

只有 @NgModule 可以出現在 imports 數組中。


通過 @NgModule 使用指令

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

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

  2. 把它導入到適當的模塊中。

  3. @NgModuledeclarations 數組中聲明它。

這三步的結果如下所示。在你創建指令的文件中導出它。 下面的例子中,"item.directive.ts" 中的 ItemDirective 是 CLI 自動生成的默認指令結構。

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';

同樣在這個文件中,把它添加到 @NgModuledeclarations 數組中:

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

declarations: [
  AppComponent,
  ItemDirective
],

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

注:

  • 組件、指令和管道都只能屬于一個模塊。你在應用中也只需要聲明它們一次,因為你還可以通過導入必要的模塊來使用它們。這能節省你的時間,并且幫助你的應用保持精簡。

imports 數組

模塊的 imports 數組只會出現在 @NgModule 元數據對象中。 它告訴 Angular 該模塊想要正常工作,還需要哪些模塊。

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

providers 數組

providers 數組中列出了該應用所需的服務。當直接把服務列在這里時,它們是全應用范圍的。 當你使用特性模塊和惰性加載時,它們是范圍化的。

bootstrap 數組

應用是通過引導根模塊 AppModule 來啟動的,根模塊還引用了 entryComponent。 此外,引導過程還會創建 bootstrap 數組中列出的組件,并把它們逐個插入到瀏覽器的 DOM 中。

每個被引導的組件都是它自己的組件樹的根。 插入一個被引導的組件通常觸發一系列組件的創建并形成組件樹。

雖然也可以在宿主頁面中放多個組件,但是大多數應用只有一個組件樹,并且只從一個根組件開始引導。

這個根組件通常叫做 AppComponent,并且位于根模塊的 bootstrap 數組中。

以上內容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號

意見反饋
返回頂部
值得信赖的彩票平台

              贵南县| 安陆市| 安化县| 阜平县| 宜黄县| 平罗县| 江源县| 黑水县| 隆安县| 遵化市| 新民市| 锡林浩特市| 乐亭县| 黄陵县| 郑州市| 五家渠市| 麻阳| 呈贡县|