Anmelden und Abmelden Routing mit Material Sidenav

Question

Hallo ich verwende Angular 4 mit Angular Material 2, wo ich etwas Unterstützung in der Routing benötigen. Derzeit habe ich die Login-Komponente geladen, wenn die App von der router-outlet in AppComponent startet, und wenn Sie angemeldet sind, findet das Routing innerhalb der router-outlet in der Sidenav statt. Das Sideav ist in einem HomeComponent und beim Abmelden kann das Eltern LoginComponent nicht gefunden werden. Wie sollte ich meine Routen konfigurieren, da ich nicht sicher bin, wie man untergeordnete Routen in Angular verwendet.

Innen 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 as 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> 

Jede Idee, wie hier die richtige Führung zu bekommen? Hilfe wäre willkommen.

Answer 1

Die Verwendung von Child-Routen wäre der beste Weg, dies zu tun. Dafür benötigen Sie 2 Routerausgänge in verschiedenen Komponentenvorlagen. Lassen Sie uns an diesem Beispiel von Routing aussehen:

{ 
    path: 'login', 
    component: LoginComponent 
    }, 
    { 
    path: '', 
    component: HomeComponent, 
    children: [ 
     { 
     path: '', 
     component: DashboardComponent 
     }, 
     { 
     path: 'somewhere/view', 
     component: SomeComponent 
     }, 
     { 
     path: 'ducks', 
     component: DuckComponent, 
     canActivate: [QuackGuard] 
     } 
} 

Dann brauchen Sie einen <router-outlet></router-outlet> in beide AppComponent und HomeComponent

Hier ist die App Komponentenvorlage mit einem Router Steckdose drin:

<div class="content"> 
    <router-outlet></router-outlet> 
</div> 

Und Dann benötigen Sie in Ihrer Home-Komponentenvorlage Folgendes:

<md-sidenav-container> 
    <router-outlet></router-outlet> 
</md-sidenav-container> 

(Natürlich ist alles für die Kürze geschnitten, aber es ist sowieso nur eine Konzept Erklärung).