Angular 2 子路由
示例
有时，将视图或路线相互嵌套是有意义的。例如，在仪表板上，您希望多个子视图（类似于选项卡，但通过路由系统实现）来显示用户的项目，联系人，消息集。为了支持这种情况，路由器允许我们定义子路由。
首先，我们RouterConfig从上方进行调整并添加子路线：
import { ProjectsComponent } from '../components/projects.component';
import { MessagesComponent} from '../components/messages.component';
export const appRoutes: RouterConfig = [
{ path: '', pathMatch: 'full', redirectTo: 'login' },
{ path: 'dashboard', component: DashboardComponent,
children: [
{ path: '', redirectTo: 'projects', pathMatch: 'full' },
{ path: 'projects', component: 'ProjectsComponent' },
{ path: 'messages', component: 'MessagesComponent' }
] },
{ path: 'bars/:id', component: BarDetailComponent },
{ path: 'login', component: LoginComponent },
{ path: 'signup', component: SignupComponent }
];现在我们已经定义了子路线，我们必须确保这些子路线可以显示在我们的中DashboardComponent，因为这是我们将子路线添加到的地方。以前我们已经了解到组件显示在<router-outlet></router-outlet>标签中。类似的，我们声明另一个RouterOutlet在DashboardComponent：
import { Component } from '@angular/core';
@Component({
selector: 'dashboard',
template: `
<a [routerLink]="['projects']">Projects</a>
<a [routerLink]="['messages']">Messages</a>
<div>
<router-outlet></router-outlet>
</div>
`
})
export class DashboardComponent { }如您所见，我们添加了另一个RouterOutlet子路由。通常，将显示路径为空的路由，但是，我们设置了到该projects路由的重定向，因为我们希望在dashboard加载路由时立即显示该重定向。话虽这么说，我们需要一个空的路由，否则您将得到如下错误：
Cannot match any routes: 'dashboard'
因此，通过添加空路由（即具有空路径的路由），我们为路由器定义了入口点。