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

问题描述

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

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的原因已得到很好的解释

The reason for entryComponents is nicely explained in this blog entry:

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

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部分中定义Page组件.拥有此单独的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屋！