angular - Implementera dynamisk routning i Angular2 (Typescript)

RouteConfig-klassen som kan användas för att dekorera en komponent (@RouteConfig) med routningsfunktioner har vissa ruttdefinitioner definierade för den komponenten. Nu är poängen att få dessa ruttdefinitioner injicerade vid körning (dynamiskt).

Anledningen är, säg att jag har en applikation där jag måste visa (UI) och definiera (dekorera) ett antal 'n' rutter, där varje rutt motsvarar det konto för vilket applikationen är laddad och följaktligen de rättigheter som är kopplade till det specifika kontot. Därför är det meningslöst att ha ruttdefinitionerna fördefinierade i dekoratören @RouteConfig för en komponent.

Min metod är att göra ett servicetjänst-anrop varje gång ett nytt konto laddas. Och hämta endast de tillhörande rutterna och injicera dem under körning för att navigera till andra respektive komponenter som motsvarar varje rutt som visas i användargränssnittet för det kontot.

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();
    }
}

I kodsnutten ovan, låt oss säga att jag vill ladda säljarens instrumentpanel som motsvarar ett säljkonto inloggat i min applikation. Nu skulle det inte ha någon mening att visa försäljningsställe-instrumentpanelen eller något som inte är relevant för en säljare (I vårt fall är säljarens lagerinstrumentpanel relevant för en säljare).

Kort sagt, att endast injicera de rutter som krävs istället för att konfigurera alla rutter på samma ställe.

REDIGERA 1:

Denna fråga har ett enklare användningsfall eller ett scenario än den duplicerade som markerades i detta inlägg (som ställdes senare). Svaren som nämns i detta inlägg har enklare tillvägagångssätt och är också mycket mer intuitiva.

Svar #1

Kolla detta inlägg:

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

I princip skapar författaren en klass DynamicRouteConfigurator som använder Reflect API för att dynamiskt lägga till rutter till @RouteConfig-dekoreraren.

Github-länk:

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

Relaterade artiklar