将组件放置在声明数组和 entryComponents 数组中 [英] Placing components in declarations array as well as entryComponents array

问题描述

当我创建一个新的页面组件时，我现在必须将它放在声明中以及 entryComponents 数组中.为什么必须在这两个地方?

When I create a new page component, I now have to place it in declarations as well as entryComponents Array. Why does it have to be at both the places ?

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

e.g I just created a new login.page.ts file, but i have to declare it in both declarations and entryComponents array (btw its not a entryComponent so to speak)

app.module.ts

app.module.ts

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

推荐答案

entryComponents的原因很好解释 在这篇博文中:

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

In the entryComponents section we define any component that is only loaded by its type. This is the case for all Page components since these are all loaded through the Navigation Controller.

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

Components that are loaded declaratively (i.e. are referenced in another component's template) don't need to be included in the entryComponents array.

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

So as you can see we have some duplication where we have to define our Page components in both the declarations and the entryComponents sections. The reason for having this separate entryComponents section is so that Angular can compile a bundle for the app that will only include the components that are actually used within the app.

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

The least we can try is to avoid code duplication. There's not much freedom for dynamic code in the annotations. Trying generate entryComponents using an expression like

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

尝试使用这样的导出函数

Trying to use an exported function like this

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

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

结果:

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

幸运的是，有一个解决方案.您可以在此处使用数组扩展运算符:

Fortunately there is a solution. You can use array spread operator here:

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

这篇关于将组件放置在声明数组和 entryComponents 数组中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！