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

入口元件

Entry components

Ivy 渲染引擎已棄用入口元件。有關更多資訊,請參見“棄用的 API 和功能”中的 entryComponents 已棄用

Entry components have been deprecated with the Ivy rendering engine. For more information, see entryComponents deprecation in the Deprecated APIs and features.

從分類上說,入口元件是 Angular 命令式載入的任意元件(也就是說你沒有在範本中參考過它), 你可以在 NgModule 中引導它,或把它包含在路由定義中來指定入口元件。

An entry component is any component that Angular loads imperatively, (which means you’re not referencing it in the template), by type. You specify an entry component by bootstrapping it in an NgModule, or including it in a routing definition.

對比一下這兩種元件型別:有一類別元件被包含在範本中,它們是宣告式載入的;另一類別元件你會命令式載入它,這就是入口元件。

To contrast the two types of components, there are components which are included in the template, which are declarative. Additionally, there are components which you load imperatively; that is, entry components.

入口元件有兩種主要的型別:

There are two main kinds of entry components:

  • 引導用的根元件。

    The bootstrapped root component.

  • 在路由定義中指定的元件。

    A component you specify in a route definition.

引導用的入口元件

A bootstrapped entry component

下面這個例子中指定了一個引導用元件 AppComponent,位於基本的 app.module.ts 中:

The following is an example of specifying a bootstrapped component, AppComponent, in a basic app.module.ts:

      
      @NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent] // bootstrapped entry component
})
    

可引導元件是一個入口元件,Angular 會在引導過程中把它載入到 DOM 中。 其它入口元件是在其它時機動態載入的,比如用路由器。

A bootstrapped component is an entry component that Angular loads into the DOM during the bootstrap process (application launch). Other entry components are loaded dynamically by other means, such as with the router.

Angular 會動態載入根元件 AppComponent,是因為它的型別作為引數傳給了 @NgModule.bootstrap 函式。

Angular loads a root AppComponent dynamically because it's listed by type in @NgModule.bootstrap.

元件也可以在該模組的 ngDoBootstrap() 方法中進行命令式引導。 @NgModule.bootstrap 屬性告訴編譯器,這裡是一個入口元件,它應該產生程式碼,來使用這個元件引導該應用。

A component can also be bootstrapped imperatively in the module's ngDoBootstrap() method. The @NgModule.bootstrap property tells the compiler that this is an entry component and it should generate code to bootstrap the application with this component.

引導用的元件必須是入口元件,因為引導過程是命令式的,所以它需要一個入口元件。

A bootstrapped component is necessarily an entry component because bootstrapping is an imperative process, thus it needs to have an entry component.

路由到的入口元件

A routed entry component

入口元件的第二種型別出現在路由定義中,就像這樣:

The second kind of entry component occurs in a route definition like this:

      
      const routes: Routes = [
  {
    path: '',
    component: CustomerListComponent
  }
];
    

路由定義使用元件型別參考了一個元件:component: CustomerListComponent

A route definition refers to a component by its type with component: CustomerListComponent.

所有路由元件都必須是入口元件。這需要你把同一個元件新增到兩個地方(路由中和 entryComponents 中),但編譯器足夠聰明,可以識別出這裡是一個路由定義,因此它會自動把這些路由元件新增到 entryComponents 中。

All router components must be entry components. Because this would require you to add the component in two places (router and entryComponents) the Compiler is smart enough to recognize that this is a router definition and automatically add the router component into entryComponents.

entryComponents 陣列

The entryComponents array

從支援 Ivy 的 9.0.0 開始,entryComponents 屬性就不再需要了,參見棄用指南

Since 9.0.0 with Ivy, the entryComponents property is no longer necessary. See deprecations guide.

雖然 @NgModule 裝飾器具有一個 entryComponents 陣列,但大多數情況下你不用顯式設定入口元件,因為 Angular 會自動把 @NgModule.bootstrap 中的元件以及路由定義中的元件新增到入口元件中。 雖然這兩種機制足夠自動新增大多數入口元件,但如果你要用其它方式根據型別來命令式的引導或動態載入某個元件,你就必須把它們顯式新增到 entryComponents 中了。

Though the @NgModule decorator has an entryComponents array, most of the time you won't have to explicitly set any entry components because Angular adds components listed in @NgModule.bootstrap and those in route definitions to entry components automatically. Though these two mechanisms account for most entry components, if your app happens to bootstrap or dynamically load a component by type imperatively, you must add it to entryComponents explicitly.

entryComponents 和編譯器

entryComponents and the compiler

對於生產環境的應用,你總是希望載入儘可能小的程式碼。 這些程式碼應該只包含你實際使用到的類別,並且排除那些從未用到的元件。因此,Angular 編譯器只會為那些可以從 entryComponents 中直接或間接訪問到的元件產生程式碼。 這意味著,僅僅往 @NgModule.declarations 中新增更多參考,並不能表達出它們在最終的程式碼套件中是必要的。

For production apps you want to load the smallest code possible. The code should contain only the classes that you actually need and exclude components that are never used. For this reason, the Angular compiler only generates code for components which are reachable from the entryComponents; This means that adding more references to @NgModule.declarations does not imply that they will necessarily be included in the final bundle.

實際上,很多函式庫宣告和匯出的元件都是你從未用過的。 比如,Material Design 函式庫會匯出其中的所有元件,因為它不知道你會用哪一個。然而,顯然你也不打算全都用上。 對於那些你沒有參考過的,搖樹優化工具就會把這些元件從最終的程式碼套件中摘出去。

In fact, many libraries declare and export components you'll never use. For example, a material design library will export all components because it doesn’t know which ones you will use. However, it is unlikely that you will use them all. For the ones you don't reference, the tree shaker drops these components from the final code package.

如果一個元件既不是入口元件也沒有在範本中使用過,搖樹優化工具就會把它扔出去。 所以,最好只新增那些真正的入口元件,以便讓應用盡可能保持精簡。

If a component isn't an entry component and isn't found in a template, the tree shaker will throw it away. So, it's best to add only the components that are truly entry components to help keep your app as trim as possible.

關於 Angular 模組的更多知識

More on Angular modules

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

You may also be interested in the following: