2

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!

Beeert
  • 21
  • 1
  • When I check your code, I can see the toggle fine without timeout. Even I can see the same thing in the URL on every subsequent click. I am seeing the toggle b/w featureone and featuretwo. Can you be little more specific? – Apoorva Chikara Jan 14 '21 at 17:23
  • @ApoorvaChikara Sure. if you toggle with the Button "without Timeout" you see that the Featuretwo is loaded correctly in the router-outlet. if you toggle again with the Button "without Timeout" it should load the Featureone in the router-outlet, but it shows Featuretwo again. If you do this with the "with Timeout" Button, it displays correctly Featureone on the second toggle. Does this help you ? – Beeert Jan 15 '21 at 08:47
  • Actually, I can't replicate same issue on stackblitz. – Apoorva Chikara Jan 15 '21 at 08:54
  • Maybe the naming is a little bit confusing. i adjusted the naming now. In the black container is the the router-outlet which should always displaying the active feature ( Featureone or Featuretwo ). If you toggle now with the "without Timeout" Button, you should see that in the black container the Featuretwo is displayed instead of the Featureone. – Beeert Jan 15 '21 at 09:01

0 Answers0