子路由

有时将视图或路径嵌套在另一个中是有意义的。例如，在仪表板上，你需要多个子视图，类似于选项卡，但通过路由系统实现，以显示用户的项目，联系人，消息等。为了支持这种情况，路由器允许我们定义子路由。

首先我们从上面调整 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> 标签中。类似我们在 DashboardComponent 中声明了另一个 RouterOutlet：

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'

因此，通过添加空路径（意味着路径为空路径），我们为路由器定义了一个入口点。