ngModule中的entryComponents是什么?

我正在研究依赖于angular 2Ionic应用程序( 2.0.0-rc0 )。 所以纳入了新的ngModules介绍。 我正在添加我的app.module.ts. 下面。

 import { NgModule } from '@angular/core'; import { IonicApp, IonicModule } from 'ionic-angular'; import { MyApp } from './app.component'; import { Users } from '../pages/users/users'; @NgModule({ declarations: [ MyApp, Users ], imports: [ IonicModule.forRoot(MyApp) ], bootstrap: [IonicApp], entryComponents: [ MyApp, Users ] }) export class AppModule {} 

entryComponents在这里做什么? Components已经在declarations定义。 那么有什么需要重复呢? 如果我不在这里包含组件,会发生什么?

这是用ViewContainerRef.createComponent()添加的dynamic添加的组件。 将它们添加到entryComponents告诉脱机模板编译器编译它们并为它们创build工厂。

路由configuration中注册的组件也自动添加到entryComponents ,因为router-outlet也使用ViewContainerRef.createComponent()将路由组件添加到DOM。

离线模板编译器(OTC)只生成实际使用的组件。 如果组件不直接用于模板,OTC不知道是否需要编译。 有了entryComponents,你可以告诉OTC也编译这些组件,以便在运行时可用。

什么是入口组件? (angular.io)

NgModule文档(angular.io)

定义这个组件时定义应该被编译的组件。 对于此处列出的每个组件,Angular将创build一个ComponentFactory并将其存储在ComponentFactoryResolver中。

如果你没有给entryComponents列出一个dynamic添加的组件,你会得到一个错误消息,因为Angular没有创build一个。

另见https://angular.io/docs/ts/latest/cookbook/dynamic-component-loader.html

你不会比Angular文档得到更好的解释。

以下是angular度文档的解释。

入口组件是根据types强制加载的任何组件。

通过其select器声明式加载的组件不是一个入口组件。

大多数应用程序组件是声明式加载的。 Angular使用组件的select器来定位模板中的元素。 然后创build组件的HTML表示并将其插入选定元素的DOM中。 这些不是条目组件。

一些组件只能dynamic加载,并不会在组件模板中引用。

引导的根AppComponent是一个入口组件。 确实,它的select符匹配index.html中的元素标记。 但是, index.html不是组件模板, AppComponentselect器不匹配任何组件模板中的元素。

dynamic加载AppComponent,因为它是按照@NgModule.bootstrap的types列出的,或者是通过模块的ngDoBootstrap方法强制性地加载。

路由定义中的组件也是条目组件。 path定义是指按其types的组件。 路由器忽略路由组件的select器(如果它有一个),并dynamic地将组件加载到RouterOutlet

编译器无法通过在其他组件模板中查找这些条目组件来发现这些条目组件。 您必须通过将它们添加到entryComponents列表来告诉它们。

Angular会自动将以下types的组件添加到模块的entryComponents

  • @NgModule.bootstrap列表中的组件。
  • 路由器configuration中引用的组件。

您不必明确提及这些组件,虽然这样做是无害的。

Interesting Posts