使用angular2中的routerLink更新模板 [英] update template using routerLink in angular2

问题描述

我在移到另一个商店位置时无法更新模板时遇到问题.(例如)默认值为 Eastleigh ，如果我移至 USA ，它将更改为 USA ，但是当我转到其他地方时，它会粘在>美国.

I'm having problem with my template not being updated when I move to another store location. (e.g) Default is Eastleigh and if I move to USA it will change to USA but when I go to somewhere else it stuck to USA.

我必须刷新页面，以便模板可以更新 Collection Store-{{}} ，这种情况不应该.

I have to refresh the page so that the template would update Collection Store - {{}} which shouldn't be the case.

在我的模板html中，我有这个.

In my template html I have this.

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

位置是从后端返回的-使用此服务:

locations are being returned from the back end - using this 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())
} 

组件-

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

这就是我呈现下拉菜单网址的方式，

This is how I render the dropdown menu urls,

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

有人可以指出为什么我渲染 currentStore?.Name 的模板不总是更新吗?我不想每次更改以选择其他URL/位置时都刷新页面.

Can someone point out why the template where I render currentStore?.Name is not always updating? I don't want to refresh the page every time I change to select a different url/location.

已修复

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使用相同的组件.您可以订阅url参数更改.例如

If those urls is used the same component. You can subscribe the url params change. e.g.

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

这篇关于使用angular2中的routerLink更新模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！