Question

我正在研究Angular插件解决方案，其中已加载插件，并且组件在路由器插座中呈现。具体来说，该插件使用SystemJs从Eggshell动态加载，如下所示：

loadPlugin(pluginName: string) {
    this.pluginLoader.load(pluginName).then(moduleFactory => {
      const moduleRef = moduleFactory.create(this.injector);
      const entryComponent = (moduleFactory.moduleType as any).entry;
      const compFactory = moduleRef.componentFactoryResolver.resolveComponentFactory(
        entryComponent
      );
      this.vcRef.createComponent(compFactory);

      // Debugging of router
      const rootRoutes = this.injector.get(ROUTES);
      const featureRoutes = moduleRef.injector.get(ROUTES);

    });
  }
}

“根”路由器用于调用loadPlugin函数，从而将ConfigComponent放置在Eggshells <router-outlet></router-outlet>中。所有这些均按预期工作。

该插件由ConfigModule组成，该模块包含如下功能路径：

const routes: Routes = [
  { path: 'widget', component: WidgetComponent }
];

@NgModule({
  declarations: [
    ConfigComponent,
    WidgetComponent
  ],
  imports: [
    CommonModule,
    SharedModule,
    RouterModule.forChild(routes),
  ],
  entryComponents: [
    ConfigComponent,
    WidgetComponent
  ],
  exports: [
    WidgetComponent,
    RouterModule
  ]
})
export class ConfigModule {
  static entry = ConfigComponent;
}

其中配置模板包含以下内容： <router-outlet></router-outlet>

问题在于，当在ConfigComponent中调用routerLink时，找不到小部件路由。 loadPlugin中的调试语句显示在渲染ConfigComponent时存在功能路由。

我唯一的猜测是，AppModule（引用根路由）不包含对ConfigModule的导入。但是，不确定这是否真的是问题所在，或者不确定根和功能路线如何精确结合才能实现这一目标。任何想法都受到欢迎...

Answer 1

因此，这与延迟加载和具有功能路线没有什么不同。我必须将默认路由添加到forChild路由：

const路线：路线= [ {path：``，component：ConfigComponent}， {path：'widget'，component：WidgetComponent} ]; 换句话说，根路由器中的路径已设置为“ Config”，从而使其已在ConfigComponent的上下文中。

使用特征路线的角度动态加载特征模块

1 个答案: