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

Question

我正在尝试创建多个相同组件的实例，并使它们“可制表” - 基本上每个组件实例只应该一次显示。问题在于我知道[hidden]指令，但它对我不起作用，因为我已经使用了许多HTML中的ID标签来构建这个巨大的组件，并且当它们同时存在于DOM中时，除了其中一个组件之外，它会破坏CSS规则。

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

更新：

我能够想出一个解决方案，利用抽象的RouteReuseStrategy类。信息来自于这里：

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

- elliotwesoff

---

为什么不将数据存储在父组件或服务中，然后向您的组件添加 @Input 并使其接受该数据。 - Ahmed Musallam

@AhmedMusallam 因为我可能会有任意数量的相同组件，每个组件都有自己独立的数据集。在父组件中保留一个字段似乎不是最佳选择。此外，这意味着该组件将始终是该父组件的子级，而这正是我们在此特定应用程序中试图避免的事情。 - elliotwesoff

这就是为什么我也提到了一个“服务”的原因。您还可以添加带有组件标识符的动态路由，并根据该标识符获取数据。 - Ahmed Musallam

Answer 1

你在跨组件保留数据方面最好使用服务。这里有一个简单的例子: http://blogs.msmvps.com/deborahk/build-a-simple-angular-service-to-share-data/ 我还有一个使用“标签页”对话框的例子。您可以在APM-Final文件夹中找到它：https://github.com/DeborahK/Angular-Routing。

- DeborahK

---

我曾经认为服务只应该用于业务逻辑和组件之间的数据传递，而不是存储数据。在我的情况下，这可能会变得混乱，因为我的应用程序可能有任意数量的组件，它们都使用同一个服务实例来存储它们的数据。 - elliotwesoff

你说得对，服务中不会“存储”数据。你可以使用服务来检索数据，并在组件之间共享它。你可以有多个服务，每个服务针对一个主要的功能区域。例如，产品服务、发票服务、用户服务等等。 - DeborahK

Answer 2

你可以像<router-outlet>一样做，如果你使用一个真正重用组件实例的重用策略。 当你动态创建一个组件时。

source

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

{{链接1：源代码}}

this.location.detach();

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

source

this.location.insert(ref.hostView);

- Günter Zöchbauer

---

这很有趣，不过似乎有点复杂（我对Angular还比较新，还不知道内部运作的所有细节）。你认为我能否通过简单使用路由器来实现我的目标？ - elliotwesoff

如果您希望状态反映在URL中，并且在选项卡更改时更新URL，则使用路由器是一个不错的选择。 - Günter Zöchbauer

我认为使用 detach 和 insert 并不复杂（虽然我自己还没有尝试过），如果你在遇到问题时提供一个 Plunker，我相信会有人来帮忙解决。 - Günter Zöchbauer

建议的服务是个好主意，但它只保持数据，视图需要重建。您提到您有复杂组件，这就是为什么我建议使用detach/insert。通常情况下，服务是最佳选择。 - Günter Zöchbauer

我会尝试一下。谢谢！ - elliotwesoff