Angular child router-outlet removes content before parent outlet animates out

1
votes

I have setup some animations that work with the main app router-outlet, but when one of those routes has children and a child outlet, when I navigate away, the child outlet content is removed immediately, thus negating the animation. Is there some way to have the content persist on navigate out so that the content is not removed prior to the animation completing? Perhaps with another animation handling :leave on that child outlet?

Including a StackBlitz: https://stackblitz.com/edit/angular-7tfkp4

You'll notice that when you go to projects, then navigate away, the content in the child router outlet disappears right away.

Using:

Angular CLI: 7.0.5
Node: 10.5.0
OS: win32 x64
Angular: 7.0.3
... animations, cdk, common, compiler, compiler-cli, core, forms
... http, language-service, material, platform-browser
... platform-browser-dynamic, router
1
angularangular-animations
First, I do not understand what does 'navigating away' mean, everything looks right in your stackblitz. Second, is the doc what you want? angular.io/guide/… – wannadream
Can you show us the code? – KiraAG
@KiraAG I have already included a stackblitz link showing the issue. – codephobia
@wannadream When you go to projects, then go to home or about, the content in projects (loaded via the child router outlet) vanishes immediately, rather than waiting for the animation to finish first. – codephobia
I changed the stackblitz url to be the one with the code editor as well. Oops. – codephobia

1 Answers

2
votes

Seems like the problem may be because you do not have a router reuse strategy.

There is a great answer here: https://stackoverflow.com/a/41515648/9097714 with the information on how to implement it.

Basically, through navigation you are discarding the last view, and it is completely re-rendering on return. Of course, without the source code, this is just an educated guess and with more information it would make it easier to respond.