I currently have a problem with the Angular Router. To be more specific with the router-outlet.
My Problem: In my Use-Case I have a Container-Component which contains 1+N instances of the same Component (FeatureCardComponent). The FeauterCardComponent contains the router-outlet. This Component has two states ( Active or Inactive ). In the Active State the router-outlet is rendered within the Component. Only one FeatureCardComponent is active at the same time. So only one router-outlet is in the DOM. If a FeatureCardComponent is set to active it should be routing to a specfic Component ( in my example a Featureone or Featuretwo ).
Behaviour: If I change the States the first time, everything works as intended. But if I change the States again, the same Component is shown in the router-outlet as in the first change. The URL shows also the correct route. In simpler terms: If I toggle once -> I see B. If I toggle again -> I also see B, but should see A.
It seems to be a racecondition, because if i use setTimeout(() => {}, 0); it works correctly as mentioned in this thread: Why is setTimeout(fn, 0) sometimes useful?.
I have here a small stackblitz project which shows my Problem: https://stackblitz.com/edit/angular-tjcapf?file=src%2Fapp%2Fcard-container%2Fcard-container.component.ts
I have tried several approaches but none of them work. I would like to avoid the setTimeout Function. Thanks for your help!