Создать динамическую маршрутизацию из файла JSON в Angular 6

Question

Я пытаюсь создать динамическую маршрутизацию в angular 6, у меня есть один JSON файл, в котором я указал путь и имя компонента, и пытаюсь загрузить его в файл приложения-маршрутизации.

JSON

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

приложение-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]

Но я получаю ошибку.

Кроме того, я не уверен в правильности такого подхода или нет? Любое другое предложение также приветствуется. :)

Answer 1

Этот подход, к сожалению, не будет работать так, как вы его создали.

Однако вы можете (не) использовать APP_INITIALIZER, чтобы получить ваши маршруты, прежде чем маршрутизатор даже начнет работать, создайте фабрику, которая в результате будет Router.forRoot(routes).

Имейте в виду, что Route не имеет свойства Text.Также компонент должен быть типом, а не строкой.Поэтому вам нужно будет выбрать правильный тип на основе строки.

Я думаю, что вы бы достигли того, что искали, используя пользовательский UrlMatcher.Вы можете прочитать об этом в Angular Docs здесь .