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

Question

我正在尝试创建同一组件的多个实例，并使它们成为某种“可制表符”——基本上每个组件实例中一次应该只显示一个。问题是我知道 [hidden] 指令，但它对我不起作用，因为我在 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);