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.組合/分組:透過
imports
和exports
陣列來把多個 NgModule 放在一起,並讓它們可用。Composability/Grouping: Bringing NgModules together and making them available via the
imports
andexports
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 |
---|---|
| 屬於該模組的可宣告物件(元件、指令和管道)的列表。 A list of declarable classes, (components, directives, and pipes) that belong to this module.
元件、指令和管道只能屬於一個模組。 如果嘗試把同一個類別宣告在多個模組中,編譯器就會報告一個錯誤。 小心,不要重複宣告從其它模組中直接或間接匯入的類別。 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. |
| 依賴注入提供者的列表。 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. 延遲載入的服務是侷限於這個延遲載入模組的注入器中的。 如果延遲載入模組也提供了 Lazy-loaded services are scoped to the lazy module's injector. If a lazy-loaded module also provides the 其它外部模組中的元件也會使用它們自己的注入器提供的服務實例。 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. |
| 要摺疊(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 的 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 你可以從 You can import many standard directives from the |
| 可供匯入了自己的模組使用的可宣告物件(元件、指令、管道類別)的列表。 A list of declarations—component, directive, and pipe classes—that an importing module can use. 匯出的可宣告物件就是本模組的公共 API。 只有當其它模組匯入了本模組,並且本模組匯出了 Exported declarations are the module's public API. A component in another module can use this module's 預設情況下這些可宣告物件都是私有的。 如果本模組沒有匯出 Declarations are private by default. If this module does not export 匯入某個模組並不會自動重新匯出被匯入模組的那些匯入。 模組 B 不會因為它匯入了模組 A,而模組 A 匯入了 Importing a module does not automatically re-export the imported module's imports. Module 'B' can't use 一個模組可以把另一個模組加入自己的 A module can list another module among its 重新匯出可以讓模組被顯式傳遞。 如果模組 A 重新匯出了 Re-export makes module transitivity explicit. If Module 'A' re-exports |
| 要自動啟動的元件列表。 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. 啟動元件會自動新增到 A bootstrap component is automatically added to |
| 那些可以動態載入進檢視的元件列表。 A list of components that can be dynamically loaded into the view. 預設情況下,Angular 應用至少有一個入口元件,也就是根元件 By default, an Angular app always has at least one entry component, the root component, 路由元件也是入口元件,因為你需要動態載入它們。 路由器建立它們,並把它們扔到 DOM 中的 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 雖然引導元件和路由元件都是入口元件,不過你不用自己把它們加到模組的 While the bootstrapped and routed components are entry components, you don't have to add them to a module's Angular 會自動把模組的 Angular automatically adds components in the module's 而那些使用不易察覺的 That leaves only components bootstrapped using one of the imperative techniques, such as 動態元件載入在除路由器之外的大多數應用中都不太常見。如果你需要動態載入元件,就必須自己把那些元件新增到 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 要了解更多,參閱入口元件一章。 For more information, see Entry Components. |
關於 NgModule 的更多知識
More on NgModules
你可能還對下列內容感興趣:
You may also be interested in the following: