如何使用动态加载的模块中的组件动态添加路由

Question

我有一个动态组件：

动态组件.module.ts

@NgModule({
  imports: [
      DynamicComponentRoutingModule,
      FormsModule,
      CommonModule,
      FormsModule,
  ],
  declarations: [
      DynamicComponent1,
      DynamicComponent2,
  ],
  exports: [DynamicComponent1,DynamicComponent2]
})
export class DynamicComponentModule {
}

及其路由：

动态组件.routing.ts

const routes: Routes = [
    {
        path: '',
        children: [
            {   
                path: 'dynamicComponent1',
                component: DynamicComponent1
            },
            {
                path: 'dynamicComponent2',
                component: DynamicComponent2,
            }
        ]
    }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class DynamicComponentRoutingModule{}

我将此模块打包成一个角度包（使用 ng-packagr），并在我的 app.component.ts 中动态加载它：

@ViewChild('vc', { read: ViewContainerRef }) vc: ViewContainerRef;

constructor(private router: Router, private _compiler: Compiler, private _injector: Injector, private route: ActivatedRoute) {
}

loadModule(path: string) {
    System.import(path).then((module) => {
        console.log(module);
        this._compiler.compileModuleAndAllComponentsAsync(module.DataTypesModule)
            .then((compiled) => {
                const m = compiled.ngModuleFactory.create(this._injector);
                const factory = compiled.componentFactories[0];
                if (factory) {
                    const cmp = factory.create(this._injector, [], null, m);
                    this.cmpRef = this.vc.createComponent(factory);
                }
            })
    });
}

如您所见，我已经加载了 DynamicComponentModule 并将 app.component 中的视图设置为 DynamicComponentModule 中的第一个组件，它恰好是 DynamicComponent1。

问题是当我想从 DynamicComponent1 导航到 DynamicComponent2 时。该怎么做？

编辑：

这是一个 plnkr，它将向您展示问题： https://embed.plnkr.co/rRCQx1N6nJvr0gBERINs/

Answer 1

您不需要手动加载和编译模块。您可以将resetConfig API 与loadChildren 一起使用。 See the plunker.

以下是相关代码：

loadModule() {
    this.router.resetConfig([
        ...this.router.config,
        {
            path: 'dynamicModule',
            loadChildren: './dynamic-component.module.ts#DynamicComponentModule'
        }
    ]);

    this.router.navigateByUrl('dynamicModule/dynamicComponent1');

您还需要将router-outlet 添加到my-app 模板中：

@Component({
    selector: 'my-app',
    template: `
    <div>
      <h2>Hello {{name}}</h2>
      <router-outlet></router-outlet>
    </div>

并从DynamicComponentRoutingModule 中删除dynamicModule 部分：

const routes: Routes = [
    {
        path: 'dynamicComponent1',
        component: DynamicComponent1
    },
    {
        path: 'dynamicComponent2',
        component: DynamicComponent2,
    }
];