Select 上一个组件列表中的对象 Angular

Question

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

您可以在details component中打开一辆车来查看它的详细信息。按后退按钮（集成后退按钮）返回list component后，你之前看的车应该是selected/highlighted.

列表组件是所有汽车的大列表。我正在使用 bootstrap。我猜来自细节组件的汽车必须提供服务？或者有什么简单的解决办法吗？

我是 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)
            })

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

Answer 1

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

像这样，

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

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

.visited{
    color:red;
}

参考：

Answer 2

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

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

我正在从 url 获取 ID，以通过后端调用检索数据。

这里是 stackblitz： Cars selection service example

Select 上一个组件列表中的对象 Angular

Select object in a list from previous component Angular

service

components

list

highlight

angular