将动态条目组件传递到模块中，然后再将它们传递到另一个模块中的角

Question

我正在为组件库制作模态组件。我在组件库中创建了一个第三方模态库。一个主要功能是能够通过服务传递组件并将其动态添加到模式中。

我的模式库有一个静态方法，允许您将组件添加到模块的入口组件中。看起来像：

export class A11yModalModule {
  static withComponents(components: any[]) {
    return {
      ngModule: A11yModalModule,
      providers: [{
        provide: ANALYZE_FOR_ENTRY_COMPONENTS,
        useValue: components,
        multi: true
      }]
    };
  }
}

太好了，那行得通。我可以像这样导入模块时将组件传递给它：A11yModalModule.withComponents([ModalContentComponent])

当我将其抽象出另一个级别时，就会发生我的问题。因此，现在有了2个模块，而不是2个模块。我需要像上面一样将一个组件从lib Consumer的模块传递到我的组件模块，然后传递给模式模块。

如何将组件从lib模块传递到模式模块？

---

我想我越来越近了。这是我的3个模块

// app module
@NgModule({
  declarations: [AppComponent, ModalContentComponent],
  imports: [
    LibModalModule.withComponents([ModalContentComponent])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }



// lib module
@NgModule({
  imports: [CommonModule],
  declarations: [LibModal],
  providers: [LibModalService],
  exports: []
})
export class LibModalModule {
  static withComponents(components: any[]) {
    return {
      ngModule: LibModalModule,
      imports: [CommonModule, A11yModalModule.withComponents(components)]
    };
  }
}



// a11y modal module
@NgModule({
  imports: [CommonModule],
  declarations: [ModalComponent],
  exports: [],
  providers: [ModalService, DomService],
  entryComponents: [ModalComponent]
})
export class A11yModalModule {
  static withComponents(components: any[]) {
    return {
      ngModule: A11yModalModule,
      providers: [{
        provide: ANALYZE_FOR_ENTRY_COMPONENTS,
        useValue: components,
        multi: true
      }]
    };
  }
}

Answer 1

withComponents方法应该返回ModuleWithProviders对象，该对象只是包装还包含提供程序的模块的包装。

它不能具有imports属性或其他内容，因为它不了解这些属性。这是角度源代码的摘录，负责从中读取元数据ModuleWithProviders：

else if (importedType && importedType.ngModule) {
  const moduleWithProviders: ModuleWithProviders = importedType;
  importedModuleType = moduleWithProviders.ngModule;
  if (moduleWithProviders.providers) {
    providers.push(...this._getProvidersMetadata(
        moduleWithProviders.providers, entryComponents,
        `provider for the NgModule '${stringifyType(importedModuleType)}'`, [],
            importedType));
    }
}

如我们所见，角度编译器从withComponents方法返回的对象中获取提供程序。

因此，为了合并模块，您可以使用方法（ANALYZE_FOR_ENTRY_COMPONENTS在中提供LibModalModule.withProviders）或重复使用，A11yModalModule.withComponents例如：

@NgModule({
  imports: [CommonModule, A11yModalModule],
  providers: [LibModalService],
  exports: []
})
export class LibModalModule {
  static withComponents(components: any[]) {
    return {
      ngModule: LibModalModule,
      providers: A11yModalModule.withComponents(components).providers
    };
  }
}

（已通过AOT测试）

如果我们希望其提供程序包含在我们的根模块注入器中，也A11yModalModule必须将其导入LibModalModule（我想您将使用，ModalService并DomService在中进行了定义A11yModalModule）。这是因为angular包括根模块注入器中的传递模块的所有提供程序。

也可以看看：

• 避免与Angular中的模块常见的混淆

• 您一直想了解的有关Angular Dependency Injection树的知识