完善左侧导航栏

查看路由文档

入这些新组件

要使用这些新组件，请把它们导入到该文件顶部的 AppRoutingModule 中，具体如下：

content_copyimport { FirstComponent } from './first/first.component';import { SecondComponent } from './second/second.component';

定义一个基本路由

创建路由有三个基本的构建块。

把 AppRoutingModule 导入 AppModule 并把它添加到 imports 数组中。

Angular CLI 会为你执行这一步骤。但是，如果要手动创建应用或使用现存的非 CLI 应用，请验证导入和配置是否正确。下面是使用 --routing 标志生成的默认 AppModule。

content_copyimport { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { AppRoutingModule } from './app-routing.module'; // CLI imports AppRoutingModuleimport { AppComponent } from './app.component';@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule // CLI adds AppRoutingModule to the AppModule's imports array
  ],
  providers: [],
  bootstrap: [AppComponent]})export class AppModule { }

1. 把 RouterModule 和 Routes 导入到你的路由模块中。

   Angular CLI 会自动执行这一步骤。CLI 还为你的路由设置了 Routes 数组，并为 @NgModule() 配置了 imports 和 exports 数组。

   CLI application routing module

   content_copyimport { NgModule } from '@angular/core';import { Routes, RouterModule } from '@angular/router'; // CLI imports routerconst routes: Routes = []; // sets up routes constant where you define your routes// configures NgModule imports and exports@NgModule({
     imports: [RouterModule.forRoot(routes)],
     exports: [RouterModule]})export class AppRoutingModule { }

2. 在 Routes 数组中定义你的路由。

   这个数组中的每个路由都是一个包含两个属性的 JavaScript 对象。第一个属性 path定义了该路由的 URL 路径。第二个属性 component 定义了要让 Angular 用作相应路径的组件。

content_copyconst routes: Routes = [
  { path: 'first-component', component: FirstComponent },
  { path: 'second-component', component: SecondComponent },];

1. 把这些路由添加到你的应用中。

   现在你已经定义了路由，可以把它们添加到应用中了。首先，添加到这两个组件的链接。把要添加路由的链接赋值给 routerLink 属性。将属性的值设置为该组件，以便在用户点击各个链接时显示这个值。接下来，修改组件模板以包含 <router-outlet>标签。该元素会通知 Angular，你可以用所选路由的组件更新应用的视图。

   Template with routerLink and router-outlet

   content_copy<h1>Angular Router App</h1><!-- This nav gives you links to click, which tells the router which route to use (defined in the routes constant in  AppRoutingModule) --><nav>
     <ul>
       <li><a routerLink="/first-component" routerLinkActive="active">First Component</a></li>
       <li><a routerLink="/second-component" routerLinkActive="active">Second Component</a></li>
     </ul></nav><!-- The routed views render in the <router-outlet>--><router-outlet></router-outlet>

路由顺序

路由的顺序很重要，因为 Router 在匹配路由时使用“先到先得”策略，所以应该在不那么具体的路由前面放置更具体的路由。首先列出静态路径的路由，然后是一个与默认路由匹配的空路径路由。通配符路由是最后一个，因为它匹配每一个 URL，只有当其它路由都没有匹配时，Router 才会选择它。