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'

因此，通过添加空路由（即具有空路径的路由），我们为路由器定义了入口点。