填寫這份《一分鐘調查》,幫我們(開發組)做得更好!去填寫Home

NgModule API

巨集觀來講,NgModule 是組織 Angular 應用的一種方式,它們透過 @NgModule 裝飾器中的元資料來實現這一點。 這些元資料可以分成三類別:

At a high level, NgModules are a way to organize Angular apps and they accomplish this through the metadata in the @NgModule decorator. The metadata falls into three categories:

  • 靜態的:編譯器配置,用於告訴編譯器指令的選擇器並透過選擇器匹配的方式決定要把該指令應用到範本中的什麼位置。它是透過 declarations 陣列來配置的。

    Static: Compiler configuration which tells the compiler about directive selectors and where in templates the directives should be applied through selector matching. This is configured via the declarations array.

  • 執行時:透過 providers 陣列提供給注入器的配置。

    Runtime: Injector configuration via the providers array.

  • 組合/分組:透過 importsexports 陣列來把多個 NgModule 放在一起,並讓它們可用。

    Composability/Grouping: Bringing NgModules together and making them available via the imports and exports arrays.

      
      @NgModule({
  // Static, that is compiler configuration
  declarations: [], // Configure the selectors
  entryComponents: [], // Generate the host factory

  // Runtime, or injector configuration
  providers: [], // Runtime injector configuration

  // Composability / Grouping
  imports: [], // composing NgModules together
  exports: [] // making NgModules available to other parts of the app
})
    

@NgModule 元資料

@NgModule metadata

下面是 @NgModule 元資料中屬性的彙總表:

The following table summarizes the @NgModule metadata properties.

屬性

Property

說明

Description

declarations

屬於該模組可宣告物件元件指令管道)的列表。

A list of declarable classes, (components, directives, and pipes) that belong to this module.

  1. 當編譯範本時,你需要確定一組選擇器,它們將用於觸發相應的指令。

    When compiling a template, you need to determine a set of selectors which should be used for triggering their corresponding directives.

  2. 該範本在 NgModule 環境中編譯 —— 範本的元件是在該 NgModule 內部宣告的,它會使用如下規則來確定這組選擇器:

    The template is compiled within the context of an NgModule—the NgModule within which the template's component is declared—which determines the set of selectors using the following rules:

    • 列在 declarations 中的所有指令選擇器。

      All selectors of directives listed in declarations.

    • 從所匯入的 NgModule 中匯出的那些指令的選擇器。

      All selectors of directives exported from imported NgModules.

元件、指令和管道只能屬於一個模組。 如果嘗試把同一個類別宣告在多個模組中,編譯器就會報告一個錯誤。 小心,不要重複宣告從其它模組中直接或間接匯入的類別。

Components, directives, and pipes must belong to exactly one module. The compiler emits an error if you try to declare the same class in more than one module. Be careful not to re-declare a class that is imported directly or indirectly from another module.

providers

依賴注入提供者的列表。

A list of dependency-injection providers.

Angular 會使用該模組的注入器註冊這些提供者。 如果該模組是啟動模組,那就會使用根注入器。

Angular registers these providers with the NgModule's injector. If it is the NgModule used for bootstrapping then it is the root injector.

當需要注入到任何元件、指令、管道或服務時,這些服務對於本注入器的子注入器都是可用的。

These services become available for injection into any component, directive, pipe or service which is a child of this injector.

延遲載入模組有自己的注入器,它通常是應用的根注入器的子注入器。

A lazy-loaded module has its own injector which is typically a child of the application root injector.

延遲載入的服務是侷限於這個延遲載入模組的注入器中的。 如果延遲載入模組也提供了 UserService,那麼在這個模組的上下文中建立的任何元件(比如在路由器導航時),都會獲得這個服務的本模組內實例,而不是來自應用的根注入器的實例。

Lazy-loaded services are scoped to the lazy module's injector. If a lazy-loaded module also provides the UserService, any component created within that module's context (such as by router navigation) gets the local instance of the service, not the instance in the root application injector.

其它外部模組中的元件也會使用它們自己的注入器提供的服務實例。

Components in external modules continue to receive the instance provided by their injectors.

要深入瞭解關於多級注入器及其作用域,參閱服務提供者

For more information on injector hierarchy and scoping, see Providers and the DI Guide.

imports

要摺疊(Folded)進本模組中的其它模組。摺疊的意思是從被匯入的模組中匯出的那些軟體資產同樣會被宣告在這裡。

A list of modules which should be folded into this module. Folded means it is as if all the imported NgModule's exported properties were declared here.

特別是,這裡列出的模組,其匯出的元件、指令或管道,當在元件範本中被參考時,和本模組自己宣告的那些是等價的。

Specifically, it is as if the list of modules whose exported components, directives, or pipes are referenced by the component templates were declared in this module.

元件範本可以參考其它元件、指令或管道,不管它們是在本模組中宣告的,還是從匯入的模組中匯出的。 比如,只有當該模組匯入了 Angular 的 CommonModule(也可能從 BrowserModule中間接匯入)時,元件才能使用NgIfNgFor` 指令。

A component template can reference another component, directive, or pipe when the reference is declared in this module or if the imported module has exported it. For example, a component can use the NgIf and NgFor directives only if the module has imported the Angular CommonModule (perhaps indirectly by importing BrowserModule).

你可以從 CommonModule 中匯入很多標準指令,不過也有些常用的指令屬於其它模組。 比如,你只有匯入了 Angular 的 FormsModule 時才能使用 [(ngModel)]

You can import many standard directives from the CommonModule but some familiar directives belong to other modules. For example, you can use [(ngModel)] only after importing the Angular FormsModule.

exports

可供匯入了自己的模組使用的可宣告物件(元件指令管道類別)的列表。

A list of declarations—component, directive, and pipe classes—that an importing module can use.

匯出的可宣告物件就是本模組的公共 API。 只有當其它模組匯入了本模組,並且本模組匯出了 UserComponent 時,其它模組中的元件才能使用模組中的 UserComponent

Exported declarations are the module's public API. A component in another module can use this module's UserComponent if it imports this module and this module exports UserComponent.

預設情況下這些可宣告物件都是私有的。 如果本模組沒有匯出 UserComponent,那麼就只有模組中的元件才能使用 UserComponent

Declarations are private by default. If this module does not export UserComponent, then only the components within this module can use UserComponent.

匯入某個模組並不會自動重新匯出被匯入模組的那些匯入。 模組 B 不會因為它匯入了模組 A,而模組 A 匯入了 CommonModule 而能夠使用 ngIf。 模組 B 必須自己匯入 CommonModule

Importing a module does not automatically re-export the imported module's imports. Module 'B' can't use ngIf just because it imported module 'A' which imported CommonModule. Module 'B' must import CommonModule itself.

一個模組可以把另一個模組加入自己的 exports 列表中,這時,另一個模組的所有公共元件、指令和管道都會被匯出。

A module can list another module among its exports, in which case all of that module's public components, directives, and pipes are exported.

重新匯出可以讓模組被顯式傳遞。 如果模組 A 重新匯出了 CommonModule,而模組 B 匯入了模組 A,那麼模組 B 就可以使用 ngIf 了 —— 即使它自己沒有匯入 CommonModule

Re-export makes module transitivity explicit. If Module 'A' re-exports CommonModule and Module 'B' imports Module 'A', Module 'B' components can use ngIf even though 'B' itself didn't import CommonModule.

bootstrap

要自動啟動的元件列表。

A list of components that are automatically bootstrapped.

通常,在這個列表中只有一個元件,也就是應用的根元件

Usually there's only one component in this list, the root component of the application.

Angular 也可以用多個引導元件進行啟動,它們每一個在宿主頁面中都有自己的位置。

Angular can launch with multiple bootstrap components, each with its own location in the host web page.

啟動元件會自動新增到 entryComponents 中。

A bootstrap component is automatically added to entryComponents.

entryComponents

那些可以動態載入進檢視的元件列表。

A list of components that can be dynamically loaded into the view.

預設情況下,Angular 應用至少有一個入口元件,也就是根元件 AppComponent。 它用作進入該應用的入口點,也就是說你透過引導它來啟動本應用。

By default, an Angular app always has at least one entry component, the root component, AppComponent. Its purpose is to serve as a point of entry into the app, that is, you bootstrap it to launch the app.

路由元件也是入口元件,因為你需要動態載入它們。 路由器建立它們,並把它們扔到 DOM 中的 <router-outlet> 附近。

Routed components are also entry components because they need to be loaded dynamically. The router creates them and drops them into the DOM near a <router-outlet>.

雖然引導元件和路由元件都是入口元件,不過你不用自己把它們加到模組的 entryComponents 列表中,因為它們會被隱式新增進去。

While the bootstrapped and routed components are entry components, you don't have to add them to a module's entryComponents list, as they are added implicitly.

Angular 會自動把模組的 bootstrap 中的元件和路由定義中的元件新增到 entryComponents 列表。

Angular automatically adds components in the module's bootstrap and route definitions into the entryComponents list.

而那些使用不易察覺的ViewComponentRef.createComponent()的方式進行命令式引導的元件仍然需要新增。

That leaves only components bootstrapped using one of the imperative techniques, such as ViewComponentRef.createComponent()as undiscoverable.

動態元件載入在除路由器之外的大多數應用中都不太常見。如果你需要動態載入元件,就必須自己把那些元件新增到 entryComponents 列表中。

Dynamic component loading is not common in most apps beyond the router. If you need to dynamically load components, you must add these components to the entryComponents list yourself.

要了解更多,參閱入口元件一章。

For more information, see Entry Components.

關於 NgModule 的更多知識

More on NgModules

你可能還對下列內容感興趣:

You may also be interested in the following: