angular路由配置

 angular环境配置完成之后，接下来我们熟悉一下angular路由的一些常见用法。

一、生成路由文件

 按照惯例，有一个独立模块来配置相关路由，这个模块类的名字叫做AppRoutingModule,位于src/app下的app-routing.module.ts文件中。

使用CLI生成它。

ng generate module app-routing --flat --module=app

然后查看src/app目录下是否生成成功。

接下来，我们查看生成的文件：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: []
})
export class AppRoutingModule { }

通常不会在路由模块中声明组件，所以可以删除@NgModule.declarations 并删除对 CommonModule 的引用。

二、导出 RouterModule

此刻的AppRoutingModule是这样的：

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

@NgModule({
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

三、添加路由定义

典型的Angular路由（Route）有两个属性：

1、path：一个用于匹配浏览器地址栏中URL的字符串。

2、component：当导航到此路由时，路由应该创建哪个组件。

如果说你希望当URL为http://localhost:4200/homePage时，首先要导入HomePageComponent；以便在Route中引用它。

如下：

import { NgModule } from '@angular/core';
import {RouterModule, Routes} from "@angular/router";
import {HomePageComponent} from "../home-page/home-page.component";

const routes: Routes = [
  { path: 'homePage', component: HomePageComponent }
];
@NgModule({
  exports: [RouterModule]
})
export class AppRoutingModule { }

RouterModule.forRoot()

 初始化路由器，并让它开始监听浏览器的地址变化。（添加到 @NgModule.imports 数组中）

imports: [ RouterModule.forRoot(routes) ],

注意：

查看app.module.ts文件中是否有引入AppRoutingModule。

import { AppRoutingModule } from './app-routing/app-routing.module';

imports: [
    AppRoutingModule
  ],

四、添加路由出口

 打开AppComponent的模板，把<router-outlet>添加进去，<router-outlet>会告诉路由器要在哪里显示路由的试图。

<router-outlet></router-outlet>   // src/app/app.component.html

五、运行项目

查看项目页面，注意你的CLI命令行是否仍在运行：

ng serve

地址栏输入http://localhost:4200，这个时候你会看到地址栏显示着项目的标题，但是并没有显示HomePageComponent中的内容。

六、添加默认路由

如果说我们想让项目首页自动导航到某个页面，请把下列路由添加到AppRoutingModule.routes数组中。

{ path: '', redirectTo: '/homePage', pathMatch: 'full' },

现在再次访问项目，你会发现地址栏默认会把一个空路径重定向到'/homePage'的路由；并且首页也加载了HomePageComponent。

七、添加路由链接(routerLink)