angular 2 服务未更新参数

Question

我有两个组件，一个包含餐厅列表，另一个包含所选餐厅的菜单，以获取我使用此服务的菜单：

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http'
import {Observable} from 'rxjs/Rx'
import 'rxjs/add/operator/map'

import { RESTAURANT_MENU } from '../../_helpers/'

@Injectable()
export class RestaurantsService {

  private menuUrl = RESTAURANT_MENU

  constructor(private http: Http) { }

  getRestaurantMenu(restaurantId): Observable<void[]> {
    this.menuUrl = this.menuUrl.replace(':id', restaurantId);
    return this.http.get(this.menuUrl)
    .map((res: Response) => res.json())
    .catch((error: any) => Observable.throw(error.json().error || 'Server error'));
  }
}

这是菜单组件，我在这里调用 getRestaurantMenu() 函数：

import { Component, OnInit } from '@angular/core';
import { RestaurantsService} from '../shared/restaurants.service';

@Component({
 selector: 'app-restaurant-menu',
 templateUrl: './restaurant-menu.component.html',
 styleUrls: ['./restaurant-menu.component.css']
})

export class RestaurantMenuComponent implements OnInit {

  constructor(private RestaurantsService: RestaurantsService) { }

  restaurant = JSON.parse(localStorage.getItem('currentMenu'))

  ngOnInit() {
    this.getRestaurantMenu(this.restaurant.id)
  }

  restaurantMenu: void[]

  getRestaurantMenu(id): void {
    this.RestaurantsService.getRestaurantMenu(id)
    .subscribe(
        restaurantMenu => this.restaurantMenu = restaurantMenu,
        err => {
            console.log(err);
    });
  }
 }

当我第一次选择一家餐厅来显示其菜单时，一切正常，但是当我返回并进入另一个菜单时，getRestaurant 服务仍在使用我选择的第一家餐厅的 ID ，我需要重新加载页面才能获得正确的菜单，我知道问题出在服务中，因为菜单组件中的 restaurant 对象 包含更多信息，例如餐厅名称、位置等。并且该信息正在正确显示

我尝试使用 ngZone、setTimeOut() 来解决它，并从餐厅列表组件中调用 getRestaurantMenu，但问题始终相同，任何解决此问题的想法都将不胜感激，谢谢

Answer 1

您正在覆盖服务中this.menuUrl = this.menuUrl.replace(':id', restaurantId); 这一行中的this.menuUrl。

所以下次调用服务getRestaurantMenu 函数时，没有什么可以替换的，实际上this.menuUrlvariable 仍然指向旧的ID。将this.menuUrl = this.menuUrl.replace(':id', restaurantId); 替换为const menuUrl = this.menuUrl.replace(':id', restaurantId); 这样您就不会覆盖服务属性。您将改用局部函数变量。