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 = this.menuUrl.replace(':id', restaurantId); 在服务中.

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);> 这样你就不会覆盖服务属性.您将改用局部函数变量.

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屋！