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

【问题标题】：Angular 2/4 - Remove component from DOM, but keep in memoryAngular 2/4 - 从 DOM 中删除组件，但保留在内存中
【发布时间】：2017-10-08 00:41:32
【问题描述】：

我正在尝试创建同一个组件的多个实例，并使它们成为“可选项卡”的一种 - 基本上每个组件实例一次应该只有一个可见。问题是我知道 [hidden] 指令，但它对我不起作用，因为我使用 HTML 中的大量 ID 标记构建了这个巨大的组件，它破坏了除一个组件之外的所有组件的 CSS当它们同时存在于 DOM 中时（CSS 规则，你知道吗？）。

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

更新：

我能够提出一个利用抽象 RouteReuseStrategyclass 的解决方案。信息取自这里：

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

【问题讨论】：

为什么不将该数据存储在父组件或服务中，然后将@Inputs 添加到您的组件并使其接受该数据。
@AhmedMusallam 因为我可以拥有任意数量的相同组件，每个组件都有自己单独的数据集。在父组件中保留一个字段似乎不是最好的选择。这也意味着该组件将始终是该父组件的子组件，这是我们在此特定应用程序中试图避免的事情。
这就是为什么我还提到了“服务”。您还可以添加带有组件标识符的动态路由，并根据该标识符获取数据。

标签： angular dom components hidden

【解决方案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);

【讨论】：

这很有趣，但似乎有点复杂（我对 Angular 还很陌生，还不知道所有的内部工作原理）。你认为我可以通过简单地使用路由器来实现我的目标吗？
如果您希望状态反映在 URL 中，并且 URL 在选项卡更改时得到更新，那么使用路由器是一个好方法。
我认为使用 detach 和 insert 并没有那么复杂（虽然我自己还没有尝试过），当您提供 Plunker 以防遇到问题时，我会肯定有人会看看。
建议的服务是个好主意，但它只保留数据，需要重建视图。你提到你有复杂的组件，这就是我建议detach/insert的原因。通常服务是要走的路。
我会试一试。谢谢！

【解决方案2】：

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

我还有一个使用 .你可以在这里找到：https://github.com/DeborahK/Angular-Routing 在 APM-Final 文件夹中。

【讨论】：

我的印象是服务应该只用于业务逻辑和组件之间传递数据，而不是存储数据。在我的情况下，这也可能会变得一团糟，因为我的应用程序可能有任意数量的组件，它们都使用同一个服务实例来存储它们的数据。
您没有在服务中“存储”数据是正确的。您将使用该服务一次检索数据并在组件之间共享它。您可以拥有多项服务，每个主要功能区域提供一项服务。所以一个 ProductService 和一个 InvoiceService 和一个 UserService 等等。