为什么Angular要求我们在声明数组和entryComponents数组中声明动态组件?

pat*_*729 5 javascript angular angular-dynamic-components

我正在为我的一个项目实现动态组件.动态组件的概念是它们在需要时进入内存并且在任何模板中都没有引用.

根据官方文档,我们声明这些组件entryComponents以防止它们在树摇动过程中被丢弃,因为它们没有模板参考.

以下是app.module.ts我在那里宣布我的两个动力组件SlideOneComponent,并SlideTwoComponent在在entryComponents阵:

  @NgModule({
  declarations: [
    AppComponent,
    ButtonComponent,
    AdDirective
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  entryComponents: [
      SlideOneComponent,
      SlideTwoComponent,
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }
Run Code Online (Sandbox Code Playgroud)

上面app.module.ts我得到以下错误:

在此输入图像描述

一旦我将两个动态组件添加到declarations数组,上述错误就会消失.上述官方文档还说我们不需要声明可从组件entryComponentsbootstrap组件访问的组件.我也参观了这个答案,但这似乎并不令人满意,因为它与Ionic有关.

请帮我知道我在哪里失踪.提前致谢!:)

Jul*_*ius 1

正如这句话中所见(在阅读字里行间时):

虽然@NgModule装饰器有一个entryComponents数组,但大多数时候你不必显式设置任何入口组件,因为Angular会自动将@NgModule.bootstrap中列出的组件以及路由定义中的组件添加到入口组件中。

您将常用组件隐式添加到 EntryComponents 数组中,这意味着它们会添加到两个数组中 - 声明和 EntryComponents(而您仅将其添加到声明数组中)。因此,您还必须向两个数组显式添加动态组件。

声明的目的是使指令(组件等)可用于模块中的其他类,并将其选择器与 HTML 相匹配。

EntryComponents告诉 Angular 创建一个 componentFactory,它是由编译器根据您在@Component装饰器中提供的元数据创建的,因此您稍后可以在createComponent().

正如所见,这两个数组的用途截然不同,并且都需要创建组件。如果组件不是动态创建的,编译器会读取它的元数据并创建一个 componentFactory,但编译器不知道动态组件,因此您必须在运行之前告知它有关动态组件的信息,因为它只运行一次 - 在编译时:)