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

Question

I'm trying to create multiple instances of the same component, and make them "tab-able" of a sort - basically only one of each component instance should be visible at a time. The problem is that I know about the [hidden] directive, but it doesn't work for me because I've built this huge component using a lot of ID tags in the HTML and it breaks the CSS on all but one of the components when they are all existent in the DOM at the same time (CSS rules, ya know?).

My question is if there's a way to remove components from the DOM, but still keep them in memory (for data retension) to be re-inserted later? Thanks!

Update:

I was able to come up with a solution utilizing the abstract RouteReuseStrategy class. Info was taken from here:

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

Answer 1

You can do something like the <router-outlet> does if you use a reuse strategy that actually reuses component instances. When you dynamically create a component

source

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

source

this.location.detach();

and the returned r is then passed to attach(ref, ...)

source

this.location.insert(ref.hostView);

Answer 2

Your best bet for retaining data across components is to use a service. I have a simple example here: http://blogs.msmvps.com/deborahk/build-a-simple-angular-service-to-share-data/

I also have an example of a "tabbed" dialog using the . You can find that here: https://github.com/DeborahK/Angular-Routing in the APM-Final folder.