javascript - Login and Log out routing with material Sidenav -
hi i'm using angular 4
angular material 2
need assistance in routing. have login component loaded when app starts router-outlet
in appcomponent
, , when logged in routing takes place inside router-outlet
in sidenav. sidenav inside homecomponent
, when logging out cannot find parent logincomponent
. how should configure routes, i'm not sure how use child routes in angular.
inside app.routing
const approutes: routes = [ { path: '', redirectto: '/login', pathmatch: 'full' } ];
app.component.html
<router-outlet></router-outlet>
home.component.html
<md-sidenav-container *ngif="isloggedin$ | async isloggedin"> <md-sidenav #sidenav mode="over" opened="true"> </md-sidenav> <md-toolbar color="primary"> <md-icon class="menu" (click)="sidenav.toggle()">menu</md-icon> <span class="example-spacer"></span> <button md-icon-button routerlink="/dashboards/surveys"> <md-icon class="example-icon">dashboard</md-icon> </button> <button md-icon-button [mdmenutriggerfor]="menu"> <md-icon>person</md-icon> </button> <md-menu #menu="mdmenu"> <button md-button (click)="onlogout()" *ngif="isloggedin"> <md-icon>exit_to_app</md-icon> <span>log out</span> </button> </md-menu> </md-toolbar> <div class="main-content"> <router-outlet></router-outlet> </div></md-sidenav-container>
any idea of how proper routing here? appreciated.
using child routes best way it. you're going need 2 router outlets in different component templates. let's @ example of routing:
{ path: 'login', component: logincomponent }, { path: '', component: homecomponent, children: [ { path: '', component: dashboardcomponent }, { path: 'somewhere/view', component: somecomponent }, { path: 'ducks', component: duckcomponent, canactivate: [quackguard] } }
then need <router-outlet></router-outlet>
in both appcomponent
, homecomponent
here's app component template router outlet in it:
<div class="content"> <router-outlet></router-outlet> </div>
and then, in home component template, you'll need this:
<md-sidenav-container> <router-outlet></router-outlet> </md-sidenav-container>
(of course, cut brevity it's concept explanation anyway).
Comments
Post a Comment