javascript - 发送到另一个组件时更新值 Angular 2

Question

我正在使用 routerLink 通过 URL 将 id 从带有餐厅列表的组件发送到另一个组件

[RouterLink] = "['../ restaurant-menu', restaurant.id]"

在另一个组件中，我使用 id 如下

ngOnInit () {
  this.restaurantId = this.router.snapshot.params ['id']
  this.getRestaurantMenu (this.restaurantId)
}

restaurantMenu: void []

getRestaurantMenu (id): void {
this.RestaurantsService.getRestaurantMenu (id)
    .subscribe (
        restaurantMenu => this.restaurantMenu = restaurantMenu,
        err => {
            console.log (err);
    });
}

第一次单击一家餐厅并加载其菜单时，一切正常，当我返回餐厅列表并单击另一家餐厅时，问题就开始了，应用程序加载了我单击的第一家餐厅的菜单，我必须手动刷新浏览器以加载正确的菜单。

我怀疑调用函数 getRestaurantMenu() 后是否可以更新 id，因为无论我多少次离开并进入不同的餐厅，它总是会显示第一家餐厅的菜单，但我也尝试在HTML:

<P> {{restaurantId}} </ p>

显示的 ID 号是正确的。我尝试了不同的方法来传递该 id，但结果是相同的，可能是什么问题？谢谢

Answer 1

也许尝试不使用snapshot，而是使用ActivatedRoute:

import { ActivatedRoute, Params } from "@angular/router";

...

constructor(private route: ActivatedRoute) {  }

...

ngOnInit() {

  // (+)param['id'] to convert string to number
  this.route.params
    .switchMap((param: Params) => this.RestaurantsService.getRestaurantMenu(+param['id']))
    .subscribe(
      restaurantMenu => this.restaurantMenu = restaurantMenu,
      err => console.log (err)
    );
}