2016-03-24 4 views
2

Ich versuche zwei verschiedene Route Configs in einer .ts Datei zu verwenden, die die gleiche Route und den gleichen übergeordneten Pfad basierend auf a hat Dienstvariablenwert.Angular2: Wie erreiche ich die Selektierbarkeit einer spezifischen Route Config Liste basierend auf einem externen Wert

Die Klausel ist, wenn ein Wert einer externen Einstellungsvariable wahr ist, wird es eine Liste von Child-Routen verwenden, und wenn es eine andere ist, wird es zweite Liste verwenden. Der Routenpfad und das Level sind identisch.

ZB:

Elternteil Route /parent... (non-Terminal Strecke) dann in der Kinder Route Config if service.value is true dann wird es die folgende Route Config

@RouteConfig([ 
    {path: '/', component: ChildComponent, name: 'ChildCmp' }, 
    {path: '/test', component: SecComponent, name: 'SecCmp' }, 
    {path: '/tester', component: OptionalComponent, name: 'ThCmp' } 
]) 

else if service.value is false verwenden sie die folgenden wird verwenden:

Ist es möglich, inject Route Config-Listen zur Liste oder bieten wenn sta basierend auf service.value? Irgendwelche Ideen, wie man diese Modularität oder Selektivität von Routenkonfigurationen erreicht?

+0

Mögliche Duplikate von [Wie erzeuge ich Konfigurationen mit Winkelrouten dynamisch/pragmatisch?] (Http://stackoverflow.com/questions/35991639/how-do-i-generate-angular-route-configurations-dynamically-pragmatic) –

Antwort

3

Sie können Router#config verwenden, mit dem Sie Routen dynamisch konfigurieren können.

es ist also so einfach wie

class Child { 
    config = []; 
    constructor(public svc: Service, router: Router) { 
    if(svc.value == 1) { 
     this.config = [ 
     {path: '/', component: ChildComponent, name: 'ChildCmp' }, 
     {path: '/test', component: SecComponent, name: 'SecCmp' }, 
     {path: '/tester', component: OptionalComponent, name: 'ThCmp' }]; 
    } 
    else if(svc.value == 2) { 
     this.config = [ 
     {path: '/', component: ChildComponent, name: 'ChildCmp' }, 
     {path: '/test', component: SecComponent, name: 'SecCmp' } 
     ]; 
    } 

    // Set the config 
    router.config(this.config); 
    } 
} 

folgt hier ein plnkr mit dem Beispiel arbeiten. Ändern Sie den Wert im Service, um die Änderung der Werte anzuzeigen.

+0

Bedeutet es, dass wir Configs dynamisch drücken können. richtig? – Gary

+1

Genau, siehe diese andere [Frage] (http://stackoverflow.com/a/35997976/4933038) (ähnliche Antwort), und Sie können diese andere [Frage] (http://stackoverflow.com/q/36114571/4933038) –

Verwandte Themen