Angular2 URL-Parameter erhalten und sie auf Vorlage

Question

Ich habe ein Element App Auflistung und mit verschiedenen Geschäften, gelang es mir, einen Standardspeicher zu setzen und die Elemente holen basierend auf storeId und eine URL param /store/3 zu bauen.

Was ich plane zu tun ist, die locationName dieser storeId in meiner Vorlage zu zeigen, sagen store 3 London ist, so möchte ich so etwas wie Collection Store - London zeigen, dass ich damit zu tun gelungen, seine Id aber zeigt Collection Store - 3 nicht wirklich Sinn ergeben.

Das ist mein Geschäft, die in meiner nav.component ist

this.sourceSites = [ 
    { 
    'Id': 1, 
    'StoreLocation': 'Eastleigh' 
    }, 
    { 
    'Id': 2, 
    'StoreLocation': 'Portchester' 
    }, 
    { 
    'Id': 3, 
    'StoreLocation': 'London' 
    }, 
    { 
    'Id': 4, 
    'StoreLocation': 'Basingstoke' 
    } 
] 

Nav Vorlage

<li *ngFor="let store of sourceSites" 
    [class.active-location]="storeId === store.Id || (storeName === store.StoreLocation)"> 
    <a [routerLink]="['/order-screen/store/' + store.Id + '/' +store.StoreLocation]"> 
     {{ store.StoreLocation}} 
    </a> 
</li> 

die storeId Um zu zeigen, ich habe dies in meiner Bestellung-Komponente

ngOnInit() { 
    this.routeSub = this.route.params.subscribe(params => { 
    this.storeId = +params['storeId']; 
    if (!this.storeId) { 
     this.storeId = DEFAULT_ORIGIN_ID; 
    } 
    }) 
} 

zu benutze Standard Id 3 Ich setze export const DEFAULT_ORIGIN_ID = 3. Obwohl dies zu tun in Ordnung ist, aber das zeigt nur die StoreId stattdessen ich StoreLocation

Mein Versuch zeigen wollen, ist eine andere URL-Parameter /store/3/Location und erstellen Sie einen anderen export const DEFAULT_ORIGIN_LOCATION = 'London' in meinem sharedService hinzuzufügen. und setzte else if() Zustand in den ngOnInit

ngOnInit() { 
    this.routeSub = this.route.params.subscribe(params => { 
     this.storeId = +params['storeId']; 
     this.storeName = +params['storeName']; 
     if (!this.storeId) { 
     this.storeId = DEFAULT_ORIGIN_ID; 
     } else if (!this.storeName) { 
     this.storeName = DEFAULT_ORIGIN_LOCATION; 
     } 
    this.getOrdersFromOrigin(this.storeId); 
}) 
} 

Aber wenn ich das tue, es zeigt mir Collection Store - London aber wenn ich meine Lage etwas ändern sonst den Standort London bestehen bleiben.

Wie kann ich die DEFAULT_ORIGIN_NAME ändern, wenn ich meinen Standort ändere?

Bearbeiten Mit Child-Route, es ändert nicht den URL-Pfad jetzt.

{ path: 'order-screen/store/:storeId', component: OrderComponent, 
    children: [ 
     { 
     path: ':storeName', 
     component: OrderComponent, 
     } 
    ] 
} 

Answer 1

Wenn Sie Routen wie

routes = [ 
    { path: '', pathMatch: 'full', redirectTo: '/order-screen/store/3/London'}, 
    { path: 'order-screen/store/:storeId', component: SomeComponent, 
     children: [...] } 
]; 

dann sollten Sie den Code arbeiten.