Implementazione del routing dinamico in Angular2 (Typescript)

Question

La classe RouteConfig che può essere utilizzata per decorare un componente (@RouteConfig) con capacità di routing ha determinate definizioni di percorso definite per tale componente. Ora, il trucco è di avere queste definizioni di percorso iniettate in fase di esecuzione (in modo dinamico).

Il motivo è, diciamo che avere un'applicazione in cui devo visualizzare (UI) e definire (decorare) 'n' numero di percorsi, ciascuno che corrisponde al conto per il quale viene caricato l'applicazione e di conseguenza i diritti associati a quel particolare account. Pertanto, avere le definizioni di percorso predefinite nel decoratore @RouteConfig per un componente non ha alcun senso.

Il mio approccio è effettuare una chiamata di servizio ogni volta che viene caricato un nuovo account. E recuperare solo i percorsi associati e iniettarli durante il runtime in modo da navigare verso gli altri componenti corrispondenti a ciascun percorso visualizzato nell'interfaccia utente per tale account.

import { Summary } from './components/summary'; 

@RouteConfig([ 
    /* 
    Let's say we need a seller dashboard to be displayed... 
    */ 
    //{ path: 'SellerDashboard', component: SellerDashboard } 
    { path: '/', component: Summary } 
]) 
class App { 
    contactInfo: ContactInfoModel; 
    public App(dataService: DataService) { 
     this.model = dataService.getContactInfo(); 
    } 
} 

Nel frammento di codice di cui sopra, consente di dire voglio caricare il venditore cruscotto corrispondente ad un account venditore looged nella mia applicazione. Ora, non ha senso visualizzare il cruscotto Point of Sales o tutto ciò che non è pertinente per un venditore (nel nostro caso, la dashboard di inventario del venditore è rilevante per un venditore).

In un elenco, è possibile iniettare solo quei percorsi che sono necessari invece di configurare tutti i percorsi nello stesso posto.

EDIT 1:

Questa domanda ha una semplice caso d'uso o di uno scenario che il duplicato segnata su questo post (che è stato chiesto in seguito). Le risposte menzionate in questo post hanno approcci più semplici e sono anche molto più intuitive.

Answer 1

Controllare questo post:

http://blog.mgechev.com/2015/12/30/angular2-router-dynamic-route-config-definition-creation/

In sostanza l'autore crea una classe DynamicRouteConfigurator che utilizza l'API Reflect per aggiungere dinamicamente percorsi alla @RouteConfig decoratore.

Github link:

https://github.com/mgechev/dynamic-route-creator/blob/master/app/components/app/app.ts