Question

您好我正在Angular 4使用Angular Material 2，我需要在路由方面提供一些帮助。目前，当应用程序从router-outlet中的AppComponent开始时，我已加载登录组件，并且当登录时，路由发生在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]
      }
}

然后，<router-outlet></router-outlet>和AppComponent

需要HomeComponent

这是包含路由器插座的应用组件模板：

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

然后，在您的家庭组件模板中，您需要：

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

（当然，为了简洁起见，所有内容都会被删除，但无论如何它只是一个概念解释。）

使用材料Sidenav登录并注销路由

1 个答案: