我正在使用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,但结果是一样的,可能是什么问题?感谢
答案 0 :(得分:0)
也许尽量不要使用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)
);
}
答案 1 :(得分:0)
我做了这里的建议 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,这是一个有点棘手的解决方案但是有效,我将使用它直到找到更好的。
答案 2 :(得分:0)