Question

我正在使用routerLink通过网址将带有餐馆列表的组件的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，但结果是一样的，可能是什么问题？感谢

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

Answer 2

我做了这里的建议 https://github.com/angular/angular/issues/9811#issuecomment-264874532 restaurantMenu组件保持不变，但在restaurantList组件中我添加了这个：

import { Router } from '@angular/router';
  ...
  openMenu(restaurant) {
    this.router.navigate(['../restaurant-menu', restaurant])
      .then(() => window.location.reload())
  }

并在restaurantList HTML上我添加了(click)="openMenu(restaurantId)"它会自动重新加载新页面并更新ID，这是一个有点棘手的解决方案但是有效，我将使用它直到找到更好的。

Answer 3

我终于解决了这个问题，问题是在服务中获取菜单不在组件中，这是解决方案：

angular 2 service is not updating params

如果有其他人遇到此问题，这可能会有所帮助。

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

3 个答案: