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

这是我渲染下拉菜单网址的方式，

<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的模板并不总是更新？每次我更改选择不同的网址/位置时，我都不想刷新页面。

固定

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 params更改。 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更新模板

1 个答案: