I'd like to say please use a named router-outlet
which work perfectly fine, but issue for me is that such urls are not user friendly at all and I personally believe url with outlet name does not make sense,
ex:-
route
{ path : "forgotPassword", component :ForgotPassword , outlet : "notlogedin" }
output in browser address bar
http://localhost:4200/(notlogedin:forgotPassword)
see how stupid that it looks in the addressbar.
so if you try to use *ngIf
to conditionally disable and enable router-outlet
to overcome the problem it does not work. One router-outlet
will get registered and no matter what you do, next router-outlet
will not respond to the route changes.
So Here is The Solution
Using ngTemplateOutlet
and ng-template
we can provide a good solution to this problem by keeping only one router-outlet
see below sample code.
<ul>
<li><a routerLink="/login">login</a></li>
<li><a routerLink="/dashboard">dashboard</a></li>
</ul>
<!--This is where my before login router stays-->
<div class="logedIn-route" *ngIf="routerActive">
<ng-container *ngTemplateOutlet="template"></ng-container>
</div>
<!--This is where my after login router stays-->
<div class="logedout-route" *ngIf="!routerActive">
<ng-container *ngTemplateOutlet="template"></ng-container>
</div>
<ng-template #template>
<router-outlet>
</router-outlet>
</ng-template>
Try the fiddle
https://jsfiddle.net/imal/e4tyqv95/36/
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…