久久综合一色综合久久小蛇,天天操夜夜操视频

先決條件

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

JavaScript 模塊與 NgModules。

啟動過程

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

當你使用 Angular CLI 命令 ng new 生成一個應(yīng)用時，其默認的 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 如何編譯和啟動本應(yīng)用。

declarations —— 該應(yīng)用所擁有的組件。

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

providers —— 各種服務(wù)提供者。

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

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

declarations 數(shù)組

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

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

declarations 數(shù)組只能接受可聲明對象。可聲明對象包括組件、指令和管道。一個模塊的所有可聲明對象都必須放在 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，但是在特性模塊中你也可以這么做。

注：

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

imports 數(shù)組

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

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

providers 數(shù)組

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

bootstrap 數(shù)組

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

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

雖然也可以在宿主頁面中放多個組件，但是大多數(shù)應(yīng)用只有一個組件樹，并且只從一個根組件開始引導。

這個根組件通常叫做 AppComponent，并且位于根模塊的 bootstrap 數(shù)組中。

Angular9 以根模塊啟動應(yīng)用