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

NgModule

把一個類別標記為 NgModule,並提供配置元資料。

Decorator that marks a class as an NgModule and supplies configuration metadata.

選項說明
providers?

在當前模組的注入器中可用的一組可注入物件。

The set of injectable objects that are available in the injector of this module.

declarations?

屬於該模組的一組元件、指令和管道(統稱可宣告物件)。

The set of components, directives, and pipes (declarables) that belong to this module.

imports?

這裡列出的 NgModule 所匯出的可宣告物件可用在當前模組內的範本中。

The set of NgModules whose exported declarables are available to templates in this module.

exports?

此 NgModule 中宣告的一組元件、指令和管道可以在匯入了本模組的模組下任何元件的範本中使用。 匯出的這些可宣告物件就是該模組的公共 API。

The set of components, directives, and pipes declared in this NgModule that can be used in the template of any component that is part of an NgModule that imports this NgModule. Exported declarations are the module's public API.

entryComponents?

定義此 NgModule 中要編譯的元件集,這樣它們才可以動態載入到檢視中。

The set of components to compile when this NgModule is defined, so that they can be dynamically loaded into the view.

bootstrap?

當該模組引導時需要進行引導的元件。列在這裡的所有元件都會自動新增到 entryComponents 中。

The set of components that are bootstrapped when this module is bootstrapped. The components listed here are automatically added to entryComponents.

schemas?

該 NgModule 中允許使用的宣告元素的 schema(HTML 架構)。 元素和屬性(無論是 Angular 元件還是指令)都必須宣告在 schema 中。

The set of schemas that declare elements to be allowed in the NgModule. Elements and properties that are neither Angular components nor directives must be declared in a schema.

id?

當前 NgModule 在 getModuleFactory 中的名字或唯一識別符號。 如果為 undefined,則該模組不會被註冊進 getModuleFactory 中。

A name or path that uniquely identifies this NgModule in getModuleFactory. If left undefined, the NgModule is not registered with getModuleFactory.

jit?

如果存在,則該指令/元件將被 AOT 編譯器忽略。它會保留在發佈程式碼中,並且 JIT 編譯器會嘗試在執行時在瀏覽器中對其進行編譯。為了確保其行為正確,該應用程式必須匯入 @angular/compiler

When present, this module is ignored by the AOT compiler. It remains in distributed code, and the JIT compiler attempts to compile it at run time, in the browser. To ensure the correct behavior, the app must import @angular/compiler.

選項

在當前模組的注入器中可用的一組可注入物件。

The set of injectable objects that are available in the injector of this module.

      
      providers?: Provider[]
    

在這裡列出了提供者的依賴項可用於注入到任何元件、指令、管道或該注入器下的服務。 引導用的 NgModule 使用的是根注入器,可以為應用中的任何部件提供依賴。

Dependencies whose providers are listed here become available for injection into any component, directive, pipe or service that is a child of this injector. The NgModule used for bootstrapping uses the root injector, and can provide dependencies to any part of the app.

延遲載入的模組有自己的注入器,通常它是根注入器的一個子注入器。 延遲載入的服務,其作用範圍侷限於這個延遲載入模組的注入器。 如果延遲載入模組也提供了 UserService,則任何在該模組的上下文中建立的元件(比如透過路由導航)都會獲得該服務的一個區域性實例, 而不是根注入器中的全域性實例。 而外部模組中的元件仍然會使用由它們的注入器提供的實例。

A lazy-loaded module has its own injector, typically a child of the app root injector. Lazy-loaded services are scoped to the lazy-loaded 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 injector. Components in external modules continue to receive the instance provided by their injectors.

範例

Example

下面的例子定義了一個類別,它被註冊在 HelloWorld 這個 NgModule 的注入器下:

The following example defines a class that is injected in the HelloWorld NgModule:

      
      class Greeter {
   greet(name:string) {
     return 'Hello ' + name + '!';
   }
}

@NgModule({
  providers: [
    Greeter
  ]
})
class HelloWorld {
  greeter:Greeter;

  constructor(greeter:Greeter) {
    this.greeter = greeter;
  }
}
    

屬於該模組的一組元件、指令和管道(統稱可宣告物件)。

The set of components, directives, and pipes (declarables) that belong to this module.

      
      declarations?: Array<Type<any> | any[]>
    

在範本中可用的選擇器(selector)包括那些直接宣告在這裡的可宣告物件和匯入的那些 NgModule 中所匯出的可宣告物件。

The set of selectors that are available to a template include those declared here, and those that are exported from imported NgModules.

可宣告物件必須屬於也只能屬於一個模組。 如果你嘗試把同一個類別宣告在多個模組中,那麼編譯器就會報錯。 要注意不能宣告那些從其它模組中匯入的類別。

Declarables 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 declare a class that is imported from another module.

範例

Example

下面的例子允許 CommonModule 使用 NgFor 指令。

The following example allows the CommonModule to use the NgFor directive.

      
      @NgModule({
  declarations: [NgFor]
})
class CommonModule {
}
    

這裡列出的 NgModule 所匯出的可宣告物件可用在當前模組內的範本中。

The set of NgModules whose exported declarables are available to templates in this module.

      
      imports?: Array<Type<any> | ModuleWithProviders<{}> | any[]>
    

範本可以使用來自任何匯入模組中所匯出的可宣告物件,包括它們從別的模組匯入後重新匯出的。 例如,ModuleA 匯入了 ModuleB 並匯出了它,就會讓 ModuleB 中的可宣告物件也同樣在那些匯入了 ModuleA 的模組中可用。

A template can use exported declarables from any imported module, including those from modules that are imported indirectly and re-exported. For example, ModuleA imports ModuleB, and also exports it, which makes the declarables from ModuleB available wherever ModuleA is imported.

範例

Example

下列例子允許 MainModule 使用 CommonModule 中匯入的任意可宣告物件:

The following example allows MainModule to use anything exported by CommonModule:

      
      @NgModule({
  imports: [CommonModule]
})
class MainModule {
}
    

此 NgModule 中宣告的一組元件、指令和管道可以在匯入了本模組的模組下任何元件的範本中使用。 匯出的這些可宣告物件就是該模組的公共 API。

The set of components, directives, and pipes declared in this NgModule that can be used in the template of any component that is part of an NgModule that imports this NgModule. Exported declarations are the module's public API.

      
      exports?: Array<Type<any> | any[]>
    

可宣告物件應該且只能屬於一個 NgModule。 一個模組可以列出在它的 exports 中列出一些其它模組,這些模組中所有公開的可宣告物件也同樣會匯出。

A declarable belongs to one and only one NgModule. A module can list another module among its exports, in which case all of that module's public declaration are exported.

預設情況下,可宣告物件是私有的。 如果 ModuleA 不匯出 UserComponent,那麼只有這個 ModuleA 中的元件才能使用 UserComponent。

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

匯出具有傳遞性。ModuleA 可以匯入 ModuleB 並將其匯出,這會讓所有 ModuleB 中的匯出同樣可用在匯入了 ModuleA 的那些模組中。

ModuleA can import ModuleB and also export it, making exports from ModuleB available to an NgModule that imports ModuleA.

範例

Example

下面的例子匯出了來自 CommonModuleNgFor 指令。

The following example exports the NgFor directive from CommonModule.

      
      @NgModule({
  exports: [NgFor]
})
class CommonModule {
}
    

定義此 NgModule 中要編譯的元件集,這樣它們才可以動態載入到檢視中。

The set of components to compile when this NgModule is defined, so that they can be dynamically loaded into the view.

      
      entryComponents?: Array<Type<any> | any[]>
    

對於在這裡列出的每個元件,Angular 都會為其建立一個 ComponentFactory,並將其儲存到 ComponentFactoryResolver 中。

For each component listed here, Angular creates a ComponentFactory and stores it in the ComponentFactoryResolver.

Angular 會自動把模組的 bootstrap(引導模組)和路由定義中參考的元件新增到 entryComponents 列表中。 該選項用於新增那些需要寫程式碼來建立的元件,比如 ViewContainerRef.createComponent()

Angular automatically adds components in the module's bootstrap and route definitions into the entryComponents list. Use this option to add components that are bootstrapped using one of the imperative techniques, such as ViewContainerRef.createComponent().

當該模組引導時需要進行引導的元件。列在這裡的所有元件都會自動新增到 entryComponents 中。

The set of components that are bootstrapped when this module is bootstrapped. The components listed here are automatically added to entryComponents.

      
      bootstrap?: Array<Type<any> | any[]>
    

該 NgModule 中允許使用的宣告元素的 schema(HTML 架構)。 元素和屬性(無論是 Angular 元件還是指令)都必須宣告在 schema 中。

The set of schemas that declare elements to be allowed in the NgModule. Elements and properties that are neither Angular components nor directives must be declared in a schema.

      
      schemas?: Array<SchemaMetadata | any[]>
    

允許的取值包括 NO_ERRORS_SCHEMACUSTOM_ELEMENTS_SCHEMA

Allowed value are NO_ERRORS_SCHEMA and CUSTOM_ELEMENTS_SCHEMA.

當前 NgModule 在 getModuleFactory 中的名字或唯一識別符號。 如果為 undefined,則該模組不會被註冊進 getModuleFactory 中。

A name or path that uniquely identifies this NgModule in getModuleFactory. If left undefined, the NgModule is not registered with getModuleFactory.

      
      id?: string
    

如果存在,則該指令/元件將被 AOT 編譯器忽略。它會保留在發佈程式碼中,並且 JIT 編譯器會嘗試在執行時在瀏覽器中對其進行編譯。為了確保其行為正確,該應用程式必須匯入 @angular/compiler

When present, this module is ignored by the AOT compiler. It remains in distributed code, and the JIT compiler attempts to compile it at run time, in the browser. To ensure the correct behavior, the app must import @angular/compiler.

      
      jit?: true