Angular 2/4 - 从DOM中删除组件，但保留在内存中

Question

我正在尝试创建同一组件的多个实例，并使它们成为可选的组件＆＃34;排序 - 基本上每个组件实例中只有一个应该一次可见。问题是我知道[隐藏]指令，但它对我没有用，因为我已经在HTML中使用了很多ID标签构建了这个巨大的组件，它打破了所有的CSS它们同时存在于DOM中的一个组件（CSS规则，你知道吗？）。

我的问题是，是否有一种方法可以从DOM中删除组件，但是仍然将它们保存在内存中（用于数据保留）以便以后重新插入？谢谢！

更新

我能够使用抽象的RouteReuseStrategy类来提出解决方案。信息来自这里：

https://www.softwarearchitekt.at/post/2016/12/02/sticky-routes-in-angular-2-3-with-routereusestrategy.aspx

Answer 1

如果您使用实际重用组件实例的重用策略，则可以执行<router-outlet>之类的操作。 动态创建组件时

source

 this.activated = this.location.createComponent(factory, this.location.length, inj, []);

source

this.location.detach();

然后将返回的r传递给attach(ref, ...)

source

this.location.insert(ref.hostView);

Answer 2

保留组件间数据的最佳选择是使用服务。我在这里有一个简单的例子：http://blogs.msmvps.com/deborahk/build-a-simple-angular-service-to-share-data/

我还有一个标签＆＃34;标签＆＃34;使用对话框。你可以在这里找到：https://github.com/DeborahK/Angular-Routing在APM-Final文件夹中。