从以前的组件 Angular 中选择列表中的对象

Posted 2023-02-23

【中文标题】从以前的组件 Angular 中选择列表中的对象

【英文标题】：Select object in a list from previous component Angular

【发布时间】：2020-11-14 09:25:13

【问题描述】：

我有一个details.component 和一个list.component。我的应用是关于汽车的。

您可以在details component 中打开一辆汽车以查看它的详细信息。按下返回按钮（集成返回按钮）返回list component 后，应该选择/突出显示您之前查看的汽车。

列表组件是所有汽车的大列表。我正在使用引导程序。我猜从细节组件的汽车必须过度使用服务？或者有什么简单的解决办法？

我是 Angular 的初学者。我将不胜感激任何类型的例子。非常感谢

更新：

list.component

carId$ = this.routerQuery.selectParams<number>('carId').pipe(
    distinctUntilChanged(),
    untilDestroyed(this),
    filter(carId => +carId > 0)
  );

constructor(carService)

this.carId$.subscribe(carid => 
              this.carService.getCarById(+carid);
              console.log(carid)
            )

如何在 html 文件中突出显示/选择最后查看的汽车？

【问题讨论】：

是的，您应该使用服务来执行此类操作。我写了一个关于创建服务的答案。在服务中设置 lastSelectedCar 并在列表组件中观察它（订阅它），然后在你的列表中查找 lastSelected 汽车并设置选择的样式。这里：***.com/questions/51343636/… 和这里 ***.com/questions/57355066/…。检查两个帖子，他们应该引导你朝着正确的方向前进。问候

非常感谢。你能提供一些示例代码吗？我还想不通

如果你提供一些关于你的组件代码的信息，我会为列表和详细视图提供一些信息

每辆车都有一个ID。它显示在 URL 的末尾。它是 carId（唯一）。当我在 list 组件上打开汽车时，我会进入 detail 组件。在我按下我实现的后退按钮后，我回到列表组件。现在应该突出显示最近查看/打开的汽车。因此，您可以更好地了解您最近查看的列表对象。

好，我给你看个服务方式

【参考方案1】：

我为你创建了一个完整的示例 stackblitz。

我创建了两个组件：cars.component 和 detail.component 我创建了一个car.service.ts，它可能通过后端处理选择和模拟检索汽车。

我从 url 获取 id 以通过后端调用检索数据。

这里是堆栈闪电战： Cars selection service example

【讨论】：

对伴侣有帮助吗？

是的，谢谢伙计。但是，我不得不稍微编辑您的解决方案。我更新了我的问题。你能看看吗？非常感谢

对我来说没有区别。您有一项服务，您可以在我的解决方案中设置最后选择的汽车。然后，您只需从模板中的服务中绑定您选择的汽车。问候

【参考方案2】：

为此，您可以使用带有 routerLinkActive 和 routerLinkActiveOptions 属性的锚标记。您的每个 CarList 都应该用锚元素包裹。单击您的元素更改类名。

类似的，

<a class="nav-link" routerLink="" routerLinkActive="visited" routerLinkActiveOptions="exact:true">Benz</a>

你的css代码可以是这样的，

.visited
    color:red;

参考： Change color of selected link in angular 4