Маршрутизация в динамическое местоположение в соответствии с файлом JSON

Question

У меня есть файл json, в котором у меня есть информация о меню и их маршрутизаторах:

app.compoment.ts:

this.menusList = [
    {label:'Alerts',
    items: [
                    {label: 'Alert-New', icon: 'pi pi-fw pi-plus', routerLink: 'pagename'}

           ]
    },

    {label:'Group',
    items: [
                    {label: 'Group-Create', icon: 'pi pi-fw pi-plus', routerLink: 'group-create'},
                    {label: 'Group-Manage', icon: 'pi pi-fw pi-download', routerLink: 'group-manage'},
                    {label: 'Group-Upload', icon: 'pi pi-fw pi-upload', routerLink: 'group-create'}
                ]
    },

    {label:'Location',
    items: [
                    {label: 'Location-Create Temporary', icon: 'pi pi-fw pi-plus', routerLink: 'location-create-temporary'},
                    {label: 'Location-Manage', icon: 'pi pi-fw pi-download', routerLink: 'location-manage'},
                    {label: 'Location-Related Groups Search', icon: 'pi pi-fw pi-upload', routerLink: 'location-related-group-search'}
                ]
    }

    ]

Теперь я могу использовать ngFor для получения таких значений, какпоэтому (я использую primeNG):

<div *ngFor="let nm of menusList">

 <p-menu #menu [popup]="true" [model]="nm.items"></p-menu>
 <button type="button" pButton icon="pi pi-bars" label="Show" (click)="menu.toggle($event)">{{nm.label}}</button>

</div>

<router-outlet></router-outlet>

Каждая ссылка ведет меня по ссылке в соответствии с ключом routerlink в json.ТАК это хорошо.Теперь я хочу знать, как настроить маршруты для этих динамических ссылок:

для ex в обычных маршрутах мы используем что-то вроде:

const routes: Routes = [

  { path: 'pagename', component: Page1Component }

]

, но теперь с появлением динамических ссылок, как мнеперейти к соответствующему компоненту?Пожалуйста, помогите мне.Спасибо.

Answer 1

Для этого вы можете использовать router.resetConfig или router.config.push

router.resetConfig :

Сброс конфигурации, используемой для навигации и создания ссылок.

constructor(private router: Router, private route: ActivatedRoute) {}

const config = this.router.config;
config.push({
        path: 'dynamicRoutePath',
        component: DynamicRouteComponent,
    });

this.router.resetConfig(config);
this.router.navigate(['dynamicRoutePath'], {relativeTo: this.route});

router.config.push :

Динамическое обновление конфигурации маршрутизации и запуск навигации.

this.router.config.push({ path: 'somePath', component: SomeComponent });