Update-Vorlage mit routerLink in angular2

Question

Ich habe ein Problem mit meiner Vorlage nicht aktualisiert, wenn ich zu einem anderen store location verschieben. (z. B.) Der Standardwert ist Eastleigh und wenn ich zu USA gehe, wird es zu USA wechseln, aber wenn ich zu einem anderen Ort gehe, bleibt es bei USA.

Ich muss die Seite aktualisieren, so dass die Vorlage Collection Store - {{}} aktualisieren würde, was nicht der Fall sein sollte.

In meiner Vorlage HTML habe ich das.

<span> Collection Store - {{ currentStore?.Name }}</span> 

Stellen vom hinteren Ende werden zurückgegeben - mit diesem Service:

public storesChanged = new BehaviorSubject([]); 

public getStores(): void { 
    this.retrieveResults().subscribe((results) => { 
    this.storesChanged.next(results.Results) 
     console.log('Name >> ', results.Results[0].Name) // this shows me the Name 
    }); 
} 
public retrieveResults(): Observable<any> { 
    return this.http.get('/api/Stores/Summary') 
    .map(res => res.json()) 
} 

Component -

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

    this.sharedService.storesChanged.subscribe((res) => { 
     this.currentStore = res.find((x) => x.Id === this.storeId); 
     console.log('Change Location >> ', this.currentStore) 
    }) 
    } 

Dies ist, wie ich das Drop-Down-Menü Urls machen,

<li *ngFor="let store of sourceSites | slice:1" [class.active-location]="storeId === store.Id"><a id="{{store.Name}}" [routerLink]="['/order-screen/store/' + store.Id + '/' +store.Name]">{{ store.Name}}</a></li> 

Kann jemand e wies darauf hin, warum die Vorlage, in der ich rende currentStore?.Name nicht immer aktualisieren? Ich möchte die Seite nicht jedes Mal aktualisieren, wenn ich eine andere URL/einen anderen Standort auswähle.

Fest

ngOnInit() { 
     this.routeSub = this.route.params.subscribe(params => { 
      this.storeId = +params['storeId']; 
      this.storeLocation = params['storeLocation']; 
      if (!this.storeId) { 
      this.storeId = DEFAULT_ORIGIN_ID; 
      } 
      this.sharedService.storesChanged.subscribe((res) => { 
      this.currentStore = res.find((x) => x.Id === this.storeId); 
      console.log('Change Location >> ', this.currentStore) 
      }) 
     }); 
     } 

Answer 1

Wenn diese Urls die gleiche Komponente verwendet wird. Sie können die Änderung der URL-Parameter abonnieren. z.B.

import { ActivatedRoute } from '@angular/router'; 

export class DemoPage { 
    constructor(private _route: ActivatedRoute) { } 
    ngOnInit() { 
      this._route.params.forEach(params => { 
        let storeId= params["storeId"]; 
        this.getStoreInfo(storeId); 
      }) 
    } 
}