您好我正在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>
有关如何在此处获得正确路由的任何想法?帮助将不胜感激。
答案 0 :(得分:3)
使用子路线是最好的方法。为此,您需要在不同的组件模板中使用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>
(当然,为了简洁起见,所有内容都会被删除,但无论如何它只是一个概念解释。)