使用 material Sidenav 登录和注销路由

Question

您好，我正在使用 Angular 4 和 Angular Material 2，我在路由方面需要一些帮助。目前，当应用程序从 AppComponent 中的 router-outlet 启动时，我加载了登录组件，当登录时，路由发生在 Sidenav 中的 router-outlet 内。 Sidenav 在 HomeComponent 中，注销时找不到父 LoginComponent。我应该如何配置我的路线，因为我不确定如何在 Angular.

中使用子路线

里面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>

知道如何在这里获得正确的路由吗？帮助将不胜感激。

Answer 1

使用子路由是最好的方法。为此，您将需要 2 个位于不同组件模板中的路由器插座。让我们看看这个路由的例子：

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

那么你的 AppComponent 和 HomeComponent

都需要一个 <router-outlet></router-outlet>

这是带有路由器插座的应用程序组件模板：

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

然后，在您的主页组件模板中，您将需要：

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

（当然，为了简洁，一切都被删减了，但无论如何这只是一个概念解释）。

使用 material Sidenav 登录和注销路由

Login and Log out routing with material Sidenav

javascript

url-routing

angular-routing

angular-material2

angular