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

Question

我有一个项目列表，这些项目列表显示在来自角度服务的 list.component 中。

当用户单击其中一个项目时，它会通过 css hidden div 显示之前的内容，该 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()，或使用浏览器历史记录控件。
您可以通过共享服务或路由器参数传递的数据。