将 id 添加到 Angular 组件的 url，以便用户可以在浏览器中使用“返回”

Question

我有一个项目列表，该列表显示在 Angular 服务的 list.component 中。

当用户点击其中一个项目时，它会显示一个之前通过 css 隐藏的 div，显示点击项目的详细信息：

<div class="show-on-click"
<show-details-component [currentService]="currentService" [localServices]="localServices"></show-details-component>
</div>

该组件通过 Input() 装饰器显示点击项的详细信息。

我正在寻找一个将 id 或单词传递给 url 的方法，这样我就可以创建指向特定项目详细信息的链接，并且用户可以使用“返回”按钮回到列表而不离开整个组件。

我确实检查了 angular 的文档并进行了很多搜索；它找不到解决方案。

我将不胜感激！非常感谢

Answer 1

我认为您应该实施路由器策略以显示项目详细信息。

您可以使用子路由并将其放置在 html 中的任何位置。在这种情况下，您可以添加“返回”按钮并调用this.location.back()，或使用浏览器历史记录控件。
您可以通过共享服务或路由器参数传递的数据。