угловые 2 служба не обновляет PARAMS

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 İŞ все еще используя идентификатор самого первого ресторана, который я выбрал, мне нужно перезагрузить страницу, чтобы получить нужное меню, я знаю, что проблема заключается в обслуживании, потому что у объекта ресторана в компоненте меню есть дополнительная информация, такая как название ресторана, местоположение и т. д., и эта информация отображается правильно.

Я попытался решить эту проблему с помощью ngZone, setTimeOut(), а также вызвать getRestaurantMenu из компонента списка ресторанов, но проблема всегда такая же, любая идея решить это было бы признано, спасибо

Answer 1

Вы переписываете this.menuUrl в этой строке this.menuUrl = this.menuUrl.replace(':id', restaurantId); на обслуживание.

Так что в следующий раз, когда вы вызываете сервис getRestaurantMenu, функция ничего не заменяет и в действии this.menuUrl переменная по-прежнему указывает на старый идентификатор. Замените this.menuUrl = this.menuUrl.replace(':id', restaurantId); на const menuUrl = this.menuUrl.replace(':id', restaurantId); Таким образом, вы не будете перезаписывать свойство службы. Вместо этого вы будете использовать локальную переменную функции.