在 Angular 6 中从 JSON 文件创建动态路由答案

【问题标题】：Create Dynamic Routing from JSON file in Angular 6在 Angular 6 中从 JSON 文件创建动态路由
【发布时间】：2019-03-12 09:55:31
【问题描述】：

我正在尝试在 Angular 6 中创建动态路由，我有一个 JSON 文件，其中我指定了路径和组件名称，并尝试加载到应用程序路由文件中。

JSON：

[{
    "path": "home",
    "component": "HomeComponent",
    "Text" :"HomePage"
  },
  {
    "path": "contactus",
    "component": "ContactUsComponent",
    "Text" :"ContactUsPge"
  }
]

app-routing.module.ts：

import { NgModule } from '@angular/core';
import { Routes, RouterModule, Router } from '@angular/router';
import { HttpErrorResponse, HttpClient } from '@angular/common/http';


const routes: Routes = [];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
  Data: any;

  constructor(router: Router, private httpService: HttpClient) {
    const config = router.config;
    this.httpService.get('./assets/dynamicRoute.json').toPromise().then(
      data => {
        this.Data = data as string[];
        console.log(this.Data);
      },
      (err: HttpErrorResponse) => {
        console.log(err.message);
      }
    ).then(i => { 
      this.Data.forEach(element => {

        config.push(element); 
        router.resetConfig(config); 
      });
    });   
  }
}

我已将这些组件添加到我的 app.module.ts 文件中。

 entryComponents: [HomeComponent, ContactUsComponent]

但是，我遇到了错误。

另外，我不确定这种方法是否正确？也欢迎任何其他建议。 :)

【问题讨论】：

标签： angular angular6 angular2-routing

【解决方案1】：

不幸的是，这种方法无法按照您创建的方式工作。

但是，您甚至可以（错误地）使用APP_INITIALIZER 在路由器启动之前获取您的路由，创建一个将产生Router.forRoot(routes) 的工厂。

请记住，Route 没有属性 Text。此外，组件必须是类型而不是字符串。所以你必须根据字符串获取正确的类型。

我认为您可以通过使用自定义 UrlMatcher 来实现您想要的。你可以在 Angular 文档here 中阅读它。

【讨论】：