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

Why Angular requires us to declare dynamic components in declarations array and entryComponents array?

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

根据官方 docs 我们在 entryComponents 中声明了这些组件,以防止它们在 tree shaking 过程中被丢弃,因为它们没有模板参考。

以下是 app.module.ts,我在 entryComponents 数组中声明了我的两个动态组件 SlideOneComponentSlideTwoComponent

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

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

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

请帮助我知道我在这方面遗漏了什么。提前致谢! :)

正如在这句话中看到的(在阅读字里行间)时:

Though the @NgModule decorator has an entryComponents array, most of the time you won't have to explicitly set any entry components because Angular adds components listed in @NgModule.bootstrap and those in route definitions to entry components automatically.

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

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

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

中使用

如上所示,这两个数组的用途截然不同,创建组件都需要它们。如果组件不是动态创建的,编译器会读取它的元数据并创建一个 componentFactory,但是编译器不知道动态组件,所以你必须在它运行之前通知它动态组件,因为他只运行一次 - 在编译时 :)