发送到另一个组件时更新值 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);
    });
}

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

我怀疑在调用函数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

Update values when sending to another component Angular 2

javascript

angular

angular-components