如何在不同的URL上重用相同的组件实例

Question

上下文

我想创建一个地图组件，我想在各种URL上重用它。实例化此组件有点耗时，并且每次创建组件时也会使用图块请求来显示地图图像。

问题

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

在下面的stackblitz中，每次切换路径时都会实例化ReusableComponent

https://stackblitz.com/edit/angular-sr9stk?file=app%2Freusable.component.ts

注意

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

使用角度5.2

Answer 1

有点像黑客，但这是我让它工作的唯一方式

https://stackblitz.com/edit/angular-13dj9k

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