Question

我正在尝试使用angular 5创建动态工作流。

该应用程序是一个包含多个步骤的向导，可以使用json文件为每个客户端配置其步骤。例如

客户端1将具有step1，step2，step3，step4
客户端2将具有step1，step3，step4

在我的AppComponent的构造器中，我有以下代码

constructor(private router: Router, private customServices: CustomServices) {

let injector = Injector.create([
  { provide: "page1", useClass: Page1Component, deps: [] },
  { provide: "page2", useClass: Page2Component, deps: [] },
  { provide: "page3", useClass: Page3Component, deps: [] },
  { provide: "page4", useClass: Page4Component, deps: [] }
]);

let comp1 = injector.get("page1");
console.log(comp1); // this works 

this.router.config.unshift(
  { path: 'page1', component: comp1 }, // this fails 
  { path: 'page2', component: injector.get("page2") },
  { path: 'page3', component: injector.get("page3") },
  { path: 'page4', component: injector.get("page4") }
);

this.links = this.customServices.items ;

}

当我创建组件并将其记录到控制台时，它可以正常工作，看到带有注释的行为“这有效”

但是当我将其与路由器配置一起使用时，出现运行时错误，即必须通过@NgModule将组件注册为“ entryComponents”。

我创建了一个公共仓库来演示该问题，如下所示

https://github.com/ganeshmgaikwad/AngularDynamicRouteProblem

有人可以帮我解决这个问题吗？

Answer 1

尝试将其更改为以下

  constructor(private router: Router, private customServices: CustomServices ) {
;



    let injector = Injector.create([
      { provide: "page1", useClass: Page1Component, deps: [] },
      { provide: "page2", useClass: Page2Component, deps: [] },
      { provide: "page3", useClass: Page3Component, deps: [] },
      { provide: "page4", useClass: Page4Component, deps: [] }
    ]);

    let comp1 = injector.get("page1").constructor;
    console.log(comp1); // this works 

    let myRoutes = [{ path: 'page1', component: injector.get("page1").constructor},
      { path: 'page2', component: injector.get("page2").constructor },
      { path: 'page3', component: injector.get("page3").constructor },
      { path: 'page4', component: injector.get("page4").constructor }];

    this.router.config.unshift(
      ...myRoutes
    );

    this.links = this.customServices.items ;
  }

Answer 2

在您的app.module.ts

中

  entryComponents: [
     HomeComponent,
     NotFoundComponent,
     Page1Component,
     Page2Component,
     Page3Component,
     Page4Component
   ],

无需明确定义。请参阅Angular Doc：https://angular.io/guide/entry-components#the-entrycomponents-array

使用角度路由动态配置角度组件无法正常工作

2 个答案: