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，我需要重新加载页面以获取正确的菜单，我知道问题出在服务中，因为菜单组件中的餐厅对象有更多信息，例如餐厅名称，位置等。并且该信息正在正确显示

我试图解决Whit ngzone，settimeout（），并从餐厅列表组件中调用getrestaurantmenu，但问题总是一样，解决此问题的任何想法都将不胜感激，谢谢

<</p>

Answer 1

您在此行中覆盖this.menuUrl this.menuUrl = this.menuUrl.replace(':id', restaurantId);。

因此，下次您调用服务getRestaurantMenu功能时，没有任何替换，实际上this.menuUrl变量仍然指向旧ID。用const menuUrl = this.menuUrl.replace(':id', restaurantId);替换this.menuUrl = this.menuUrl.replace(':id', restaurantId);，这样您就不会覆盖服务属性。您将使用本地函数变量。