如何在不同的 url 上重用相同的组件实例答案

【问题标题】：How to reuse the same component instance on different urls如何在不同的 url 上重用相同的组件实例
【发布时间】：2018-04-10 15:00:30
【问题描述】：

上下文

我想创建一个地图组件，我想在各种 URL 上重复使用它。实例化这个组件有点费时，而且每次创建组件时都会用完瓦片请求来显示地图图像。

问题

当组件嵌套在树中时，如何在不同的 url 上重用相同的组件实例？

在下面的堆栈闪电战中，每次切换路由时都会实例化一个新的ReusableComponent

注意

我知道RouteReuseStrategy，但这仅适用于顶级组件（即在路由设置中定义的）

使用角度 5.2

【问题讨论】：

标签： angular

【解决方案1】：

有点骇人听闻，但这是我让它工作的唯一方法

在服务中将组件创建为 ComponentRef，然后将其插入指令的 ViewContatiner，该指令存在于每个路由上。最棘手的部分是我必须在导航之前监听 NavigationStart 事件以分离组件，以便可以在下一条路线上重新连接它。

【讨论】：

谢谢，这就是我的想法，但我不知道如何实现它。它现在不适用于同一个组件上的 2 个指令，但没有什么能阻止它，对吧？
你是什么意思？喜欢拥有 2 个相同的组件或将指令用于 2 个不同的可重用组件？
拥有 2 个相同的组件
不确定，将组件实例插入另一个 ViewContatiner 似乎会从第一个中删除它
我可能需要对其进行修改以使其与同一棵树中的 2 个或多个相同组件一起使用而不更改 url（例如stackblitz.com/edit/…），但问题只是关于重用它在不同的网址上，您的解决方案适用于此。谢谢:)