Question

当我创建一个新的页面组件时，我现在必须将它放在声明和entryComponents Array中。为什么它必须在两个地方？

例如我刚刚创建了一个新的login.page.ts文件，但我必须在声明和entryComponents数组中声明它（顺便说一句，它不是一个entryComponent）

app.module.ts

@NgModule({
  declarations: [
    MyApp,
    LoginPage
  ],
  imports: [
    IonicModule.forRoot(MyApp),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    LoginPage
  ],
  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {}

Answer 1

entryComponents的原因很清楚in this blog entry：

在entryComponents部分中，我们定义了仅由其类型加载的任何组件。所有Page组件都是这种情况，因为它们都是通过导航控制器加载的。

以声明方式加载的组件（即在另一个组件的模板中引用）不需要包含在entryComponents数组中。

因为你可以看到我们有一些重复，我们必须在声明和entryComponents部分中定义我们的页面组件。拥有这个单独的entryComponents部分的原因是Angular可以为应用程序编译一个包，该包只包含应用程序中实际使用的组件。

我们至少可以尝试避免代码重复。注释中动态代码的自由度不大。尝试使用类似

的表达式生成entryComponents

const myComponents = [
  MyComponent
]
const myPages = [
  MyApp,
  LoginPage
]
@NgModule({
 entryComponents: myComponents.concat(myPages),
 /* ... */
})

将导致：

Error: Error encountered resolving symbol values statically. 
 Function calls are not supported. 
 Consider replacing the function or lambda with a reference to an exported function

尝试使用像这样的导出函数

export function getEntryComponents() { return [ /* ... */ ] }

@NgModule({
 entryComponents: getEntryComponents,
 /* ... */
})

结果：

Error: Error encountered resolving symbol values statically.
 Expression form not supported

幸运的是，有一个解决方案。您可以在此处使用数组传播运算符：

@NgModule({
  declarations: [
    ...myComponents,
    ...myPages
  ],
  entryComponents: myPages
 /* ... */
})

Answer 2

如果正确配置了应用程序的其余部分，则实际上不需要放置entryComponent。

Angular会自动为条目组件添加某些组件。   @NgModule.bootstrap中列出的组件会自动添加。   router configuration中引用的组件会自动添加。   这两种机制几乎占所有入口组件。

如果你的应用程序碰巧引导或动态加载组件   以其他方式输入，您必须将其添加到entryComponents   明确。

虽然将组件添加到此列表中是无害的，但最好是   仅添加真正的入口组件的组件。不包括在内   在其他组件的模板中引用的组件。

来自：https://angular.io/docs/ts/latest/cookbook/ngmodule-faq.html#!#q-when-entry-components

将组件放在声明数组和entryComponents数组中

2 个答案: