Changing router output with * ngIf in app.component.html in angular2

Question

I am using angular 2.0 final. I am trying to change the location of the exit router in the main app.component.html. The template updates the thin display, except that the first time I use router.navigate, the component will not appear in the new router-output, and there is no error. The second one and every time I use router.navigate, it works correctly.

example template app.component.html

<div *ngIf="authenticated() == false"> <h1>not logged in</h1> <router-outlet> </router-outlet> </div> <div *ngIf="authenticated()"> <h1>logged in</h1> <router-outlet> </router-outlet> </div> 

Answer 1

I would like to say, please, use the name router-outlet , which works great, but the problem for me is that such URLs are not at all user friendly, and I personally think that the URL with the exit name does not make sense,

eg: -

route

 { path : "forgotPassword", component :ForgotPassword , outlet : "notlogedin" } 

output to the address bar of the browser

http: // localhost: 4200 / (notlogedin: forgotPassword)

let's see how stupid it looks in the address bar.

therefore, if you try to use *ngIf to conditionally disable and enable router-outlet to solve the problem, this will not work. One router-outlet will be registered, and no matter what you do, the next router-outlet will not respond to route changes.

So here is the solution

Using ngTemplateOutlet and ng-template , we can provide a good solution to this problem, preserving only one router-outlet , see the code example below.

 <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 violin

https://jsfiddle.net/imal/e4tyqv95/36/

Answer 2

Instead, you should consider using named router-outlet .

The documentation says: A template can contain exactly one nameless.

 <div *ngIf="authenticated() == false"> <h1>not logged in</h1> <router-outlet name="notloggedin"> </router-outlet> </div> <div *ngIf="authenticated()"> <h1>logged in</h1> <router-outlet name="loggedin"> </router-outlet> </div> 

The router will look like this:

 { path: 'page1', component: Page1Component, outlet: 'notloggedin' }, { path: 'page2', component: Page2Component, outlet: 'loggedin' } 

Here is an example from @yurzui in this post .

Answer 3

I had to use ViewContainerRef to use the same router output on both the mobile and the desktop:

 <!-- MOBILE --> <div *ngIf="isMobile"> <div #mobileOutlet></div> </div> <!-- DESKTOP --> <div *ngIf="!isMobile"> <div #desktopOutlet></div> </div> <ng-template #tpl> <router-outlet></router-outlet> </ng-template> 

And I had no problems using createEmbeddedView for both:

 @ViewChild('mobileOutlet', { read: ViewContainerRef }) _vcrMobile; @ViewChild('desktopOutlet', { read: ViewContainerRef }) _vcrDesktop; @ViewChild('tpl') tpl; ngAfterViewInit() { if (this.isMobile) this._vcrDesktop.createEmbeddedView(this.tpl); else this._vcrMobile.createEmbeddedView(this.tpl); } 

the only thing you will have to switch this outlet if you switch between control points. For example, resizing from desktop to mobile:

 this._vcrDesktop.clear(); this._vcrMobile.createEmbeddedView(this.tpl)