Question

假设以下路线：

/cars/3

如果我要编辑这个项目，我可以简单地在模板中包含编辑表单并将汽车项目作为输入传递，如下所示：

<edit-car [car]="car"></edit-car>

如果我改用以下路线：

/cars/3/edit-car

该组件需要接收汽车物品的信息。如果我从详细信息组件导航到编辑组件，那么从商店中获取汽车项目信息是没有问题的：

car$ = this.store.select(fromRoot.getCar)

但是，如果某人浏览到/cars/3然后将路线更改为/cars/4/edit-car，则编辑组件仍将填充Car 3的信息。

在这种情况下，我需要从API获取Car 4的信息。

为什么会有人随意更改网址参数？我不知道。我只是好奇我解决这个问题的选择。

Answer 1

您可以通过与路由器的一些非常巧妙的交互来解决这个问题。例如，你的路由器看起来像这样

{ path: 'editcar', component: editcar, canDeactivate: [CanDeactivateService] },
{ path: 'editcar/:id', component: editcar, canDeactivate: [CanDeactivateService] }

然后在您的ngOnInit中，您可以使用订阅来监控URL路由您需要导入import { Router, ActivatedRoute, Params } from '@angular/router';

this.routeSubscription = this._activatedRoute.params.subscribe((params: Params) => {
  if (+params['id'] >= 0) {
    this.selectedCar = +params['id'];
  } else {
    this.selectedCar = 1; //default
  }

从那里开始使用this.selectedCar

调用您的API

有条件地从Angular中的商店或API中选择数据

1 个答案: