angular 2 服务未更新参数

Question

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

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

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

我已经尝试使用 ngZone、setTimeOut() 解决它，还从餐厅列表组件调用 getRestaurantMenu，但问题总是一样，任何解决此问题的想法都将不胜感激，谢谢

Answer 1

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

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

angular 2 服务未更新参数

angular 2 service is not updating params

angular2-services

angular2-components

angular