angular2でrouterLinkを使用してテンプレートを更新

Question

別のstore locationに移動するとテンプレートに問題があります。 （例）デフォルトはEastleighです。USAに移動するとUSAに変わりますが、別の場所に行くとUSAに行きました。

テンプレートを更新するには、Collection Store - {{}}というようにページを更新する必要がありますが、そうではありません。

私のテンプレートhtmlにはこれがあります。

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

場所バックエンドから返されている - このサービスを使用して：

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

コンポーネント -

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

これは、私がドロップダウンメニューのURLをレンダリングする方法を

<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> 

です

canon私がレンダリングするテンプレートcurrentStore?.Nameが必ずしも更新されていないのはなぜですか？私は別のURL /場所を選択するために変更するたびにページを更新したくありません。

固定

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

これらのURLは、同じ成分を使用した場合。 url paramsの変更をサブスクライブすることができます。例：

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