动态将组件添加到导入库的子路由

Question

我正在寻找一种执行这种情况的方法：

• 在一个Angular工作空间中，有两个项目-一个是带有组件的库项目，另一个是使用该库中的组件的 main 项目；
• 该库由一个设置模块组成，该模块的左侧是菜单，右侧是视图，其中设置模块子路由 router-outlet / em>；
• “设置模块”使用户能够以某种方式配置模块，即菜单中包含一个选项，可单击带有绑定组件的选项-单击选项后，该组件将显示在右侧并突出显示该选项；

export const config = {
  authorization: {},
  navigation: {
    title: 'Test page',
    homeRoute: 'home',
    actions: [{ title: 'Do stuff', route: '/settings' }]
  },
  settings: {
    groups: [
      {
        groupName: 'Advanced',
        options: [
          {
            name: 'Settings Option Route',
            route: 'test',
            component: TestComponent
          }
        ]
      }
    ]
  }
};

@NgModule({
  declarations: [AppComponent, TestComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ThatImportedLibrary['forRoot'](config)
   ],
  exports: [TestComponent],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

库中的

Settings组件取出有关注入对象中路由的数据，并基于该数据重置子路由（通过使用主 settings 路由并从 config对象添加子组件）。

export const settingsRoutes: Routes = [
  {
    path: 'settings',
    component: SettingsPanelComponent,
    children: []
  }
];

@NgModule({
  imports: [RouterModule.forChild(settingsRoutes)],
  exports: [RouterModule]
})
export class SettingsPanelRoutingModule {
  constructor(@Inject(ConfigService) private config: FacConfig) {
    // RouterModule.forChild(settingsRoutes);
    // Looking for a way to dynamically add the child route from config object
    const settingsRoutes = [
      {
        path: 'settings',
        component: SettingsPanelComponent,
        children: []
      }
    ];

    const childRoute = {
        path: config.settings.groups[0].options[0].route
        component: config.settings.groups[0].options[0].component
    }

    settingsRoutes[0].children.push(childRoute);
    this.router.resetConfig(settingsRoutes);
    }
}

它不起作用，但是-在主模块（TestComponent）中单击带有子组件的选项后，它会导致：

ERROR Error: No component factory found for TestComponent. Did you add it to @NgModule.entryComponents? at noComponentFactoryError (component_factory_resolver.ts:17)

• 在主项目中，导入库后，可以转到 / settings 路径，该路径将打开带有选项的菜单；
• “设置”中的选项提供了名称，路由路径和主项目中存在的组件 ；
• 点击一个选项应打开分配的路线，例如 / settings / test ，但不起作用（如上所示）；
• 是否可以引用外部组件（来自其他应用程序）作为到导入模块的子路径？

Answer 1

好吧，我自己回答了-在主app.module中，我只需要将该特定模块添加到@NgModule中的 entryComponents 属性中即可。

@NgModule({
  declarations: [AppComponent, TestComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ThatImportedLibrary["forRoot"](config)
  ],
  exports: [TestComponent],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [TestComponent] // that's all!
})