Angular 路由以及路由分离

2017-11-09

我们要使用 Angular 路由器进行导航，改变页面内容。下面我们来看Angular路由的使用方法：

1、base href

打开index.html，确保它的head区顶部有一个 base href=”…”元素

1 2	<head> <base href="/">

2、配置路由

在src/app/app.module.ts中引入RouterModule,再定义和配置路由数组。这里以 heroes 定义路由为例：

import { RouterModule } from '@angular/router';
 imports: [
    RouterModule.forRoot([
      {
        path: 'heroes',
        component: HeroesComponent
      }
    ])
  ],

路由定义包括以下部分：
Path: 路由器会用它来匹配浏览器地址栏中的地址，如heroes。
Component: 导航到此路由时，路由器需要创建的组件（HeroesComponent）。

3、路由插座

在浏览器输入http://localhost:4200/heroes，路由是还没有效果的，需要一个路由出口。
下面我们在src\app\app.component.html的末尾加上：

1	<router-outlet></router-outlet>

重新查看http://localhost:4200/heroes，你会发现页面上显示出了 HeroesComponent组件的内容。

4、通配路由

如果输入一个无效的路由地址，页面是不会有效果的。这个时候我们可以新建一个404组件，所有无效的路由地址都显示该组件。
配置如下：

{
    path: '**',
    component: Code404Component
  },

　注意，通配路由要放在路由配置项的最后面。

5、路由分离

目前路由已经可以用起来了，但是还有个小问题，就是直接在app.modules.ts中定义路径并不是很好的方式，因为随着路径定义的复杂，这部分最好还是用单独的文件来定义。
现在，新建文件src\app\app-routing.module.ts，将上面在app.modules.ts中定义的路由删除并在app.routes.ts中重新定义：
src\app\app-routing.module.ts文件内容如下：

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import { HeroesComponent } from './heroes.component';
import { Code404Component } from './code404/code404.component';
export const routes: Routes = [
  {
  {
    path: 'heroes',
    component: HeroesComponent
  },
  {
    path: '**',
    component: Code404Component
  },
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: []
})
export class AppRoutingModule {}

接下来，在app.modules.ts中引入AppRoutingModule.
现在，app.modules.ts的内容如下：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { CommonModule } from '@angular/common';
import {AppRoutingModule} from './app-routing.module'; // 引用路由主文件
import { AppComponent } from './app.component';
import { HeroesComponent } from './heroes.component';
import { Code404Component } from './code404/code404.component';
@NgModule({
  declarations: [
    // 模块中有什么东西，只能声明组件，指令，管道
    AppComponent,
    HeroesComponent,
    Code404Component
  ],
  imports: [
    // app模块依赖的东西
    BrowserModule,
    FormsModule,
    HttpModule,
    CommonModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [
    // 模块的主组件，
    AppComponent
  ],
})
export class AppModule { }

这样两个文件分开是不是更加的清晰明了，方便后面的维护。