使用物料边框登录和注销工艺路线

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>

然后，在您的home组件模板中，您需要以下内容：

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

(当然，一切都是为了简洁，但无论如何这只是一个概念解释)。