Angular 2服务未更新参数 [英] angular 2 service is not updating params

问题描述

我有两个部分，一个包含餐厅列表，另一个包含所选餐厅的菜单，要获取我使用此服务的菜单，

I have two components, one with a list of restaurants and another with the menu of the selected restaurant, to get the menu I use this service:

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()函数:

This is the menu component, where I call the getRestaurantMenu() function:

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

everything works fine the first time I select a restaurant to show its menu, but when I go back and get into another menu the getRestaurant service is still using the id of the very first restaurant I selected, I need to reload the page to get the right menu, I know that the problem is in the service because the restaurant object in the menu component has more info such as the restaurant name, the location etc. and that info is being displayed right

我已经尝试通过ngZone，setTimeOut()来解决它，还尝试从餐馆列表组件中调用getRestaurantMenu，但是问题始终是相同的，解决这个问题的任何想法都将不胜感激，谢谢

I've tried to solve it whit ngZone, setTimeOut(), and also calling the getRestaurantMenu from the restaurant list component but the problem its always the same, any idea to solve this would be appreciated, thanks

推荐答案

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

You are overwriting this.menuUrl in this line this.menuUrl = this.menuUrl.replace(':id', restaurantId); in the service.

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

So next time you invoke the service getRestaurantMenu function there is nothing to replace and in effect this.menuUrlvariable still points to the old id. Replace this.menuUrl = this.menuUrl.replace(':id', restaurantId); with const menuUrl = this.menuUrl.replace(':id', restaurantId); That way you won't overwrite the service property. You will use local function variable instead.

这篇关于Angular 2服务未更新参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！