Is it possible to disable a routerOutlet from accepting new content?

I am trying to route my menu items to display in a new material tab. What I currently have is that when a menu is clicked, in the router events I detect what the route is, I dynamically create a new tab, then the 1st component within that tab is a dynamically created breadcrumb component. That breadcrumb component has a router-outlet in it (no name) where the 1st component created by the router then ends up displaying. It worked, yeah! but.... when the user clicks another menu, another tab appears with the breadcrumb which now contains another unnamed routerOutlet and the new content does appear there, but it also appears added to the router-outlet that still exists in the 1st tab.

1. 
   Is there a better way of redirecting a route to render it's content within dynamically created components in a tab?
   
   
2. 
   I tried to 'detach' the route created component from the div that contains it and the router outlet, then I cleared that div, then I inserted the component back in, but the content doesn't render and somehow the router-outlet still exists that will display the content from the next menu click.
   
   
3. 
   I tried assigning a random name to the router so that it would stop accepting new content but that doesn't work either. I also tried using named routerOutlets from the beginning but nothing works. I've also tried to find a way in the various routing events to dynamically set a routerOutlet 'outlet' name (like a guid) but can't find a place to do that.
   
   
4. 
   I can't deactivate it or it takes away the content as well. I also tried detaching, clear, inserting back, then deactivate but somehow it's still connected to the content it initially displayed and nothing renders.
   

Any other ideas on how to stop a routerOutlet from accepting new content? Or display route events in a new tab?

Continue reading...