OTF 组件的角度路由

Posted 2023-02-23

【中文标题】OTF 组件的角度路由

【英文标题】：Angular routes for OTF components

【发布时间】：2019-02-14 17:24:21

【问题描述】：

我们使用 Angular 6，动态创建组件并使用以下代码为它们定义路线：

const template = '<span>generated on the fly: name</span>';
const tmpCmp = Component( template: template )(class 
  );
const tmpModule = NgModule( declarations: [tmpCmp] )(class 
  );

await this._compiler.compileModuleAndAllComponentsAsync(tmpModule)
  .then((factories) => 
    const f = factories.componentFactories[0];
    const cmpRef = this.vc.createComponent(tmpCmp);
    cmpRef.instance.name = 'dynamic';

    appRoutes.push( path: 'dynamic', component: tmpCmp);

  )

this.router.resetConfig(appRoutes);

当我们导航到动态创建的组件的 url 时，我们得到一个错误：

没有为 ConfirmComponent 找到组件工厂。你添加到 @NgModule.entryComponents？

我们缺少什么，是否支持这种情况？

非常感谢任何帮助

【问题讨论】：

见my answer。我很快会写一篇文章，解释为什么我的解决方案有效，以及为什么你的解决方案无效。 Follow me on Twitter 得到通知

谢谢，您的示例适用于我的情况。抱歉回复晚了，会跟进那篇文章:)

酷，祝你好运

【参考方案1】：

你可以这样做：

  ngOnInit() 
    const template = '<span>generated on the fly: name</span>';
    const tmpCmp = Component(template: template)(class 
    );

    const routes = [path: '', component: tmpCmp];
    const tmpModule = NgModule(imports: [RouterModule.forChild(routes)], declarations: [tmpCmp])(class 
    );

    this.compiler.compileModuleAsync(tmpModule).then((ngModuleFactory) => 

      const appRoutes = [...this.router.config];

      const route = 
        path: 'dynamic',
        loadChildren() 
          return ngModuleFactory;
        
      ;

      appRoutes.push(route);

      this.router.resetConfig(appRoutes);

      // test navigation
      this.router.navigateByUrl('/dynamic');
    );