Angular中的路由介绍

Angular 2+ 中的路由器可以很容易地为您的应用程序定义路由。以下是在您的应用程序中开始使用基本路由的步骤：

1. 基础标签

如果您使用 Angular CLI 创建项目，默认情况下会在 index.html 中添加基本标签，但如果您不使用 Angular，则需要自己添加命令行界面。您所要做的就是在文档的头部添加这个，在任何样式或脚本声明之前：

<base href="/">

2. 模块配置

接下来，您将在 app 模块 (app.module.ts) 中导入 RouterModule 和 Routes 并定义一个包含路由的数组配置。在主应用程序模块中导入的 RouterModule 使路由器在您的应用程序中随处可用。另请记住，当您的应用程序增长时，您可能希望在单独的路由模块中定义路由配置，以创建更好的关注点分离：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule, Routes }   from '@angular/router';

import { AppComponent } from './app.component';
import { ProfileComponent } from './profile/profile.component';
import { SettingsComponent } from './settings/settings.component';
import { HomeComponent } from './home/home.component';
const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'profile', component: ProfileComponent },
  { path: 'settings', component: SettingsComponent }
];

3. 模板与 & 路由器链接

应用程序组件成为您的应用程序的外壳，并采用应该呈现路由的标记。锚标记使用 routerLink 绑定而不是 href 属性来指向特定路由。下面是您的 app.component.ts 的样子。

还要注意 routerLinkActive 绑定的使用，它将给定的类名添加到当前活动的路由中，从而可以轻松地使用一些 CSS 设置活动链接的样式：

<nav>
  <a routerLink="/"
     routerLinkActive="active">Home</a>
  <a routerLink="/profile"
     routerLinkActive="active">Profile</a>
  <a routerLink="/settings"
     routerLinkActive="active">Settings</a>
</nav>