angular4.0之-----路由

首先需要先了解一个概念(SPA：一组视图状态的集合)，也就是单页面应用，一个页面只加载一次，不再刷新，只改变页面部分内容的应用。

路由为每一个视图分配一个唯一的URL。

在创建的时候 ng new routeDemo --routing即可生成一个带路由的项目。

运行 ng g component code404 添加一个code404组件 

路由的基本知识

名称	简介
Routes	路由的配置，URL和组件之间的映射以及组件和组件插座RouterOutlet的映射关系
RouterOutlet	在HTML中标记组件插入位置的占位符标签
Router	在运行时执行路由的对象,navigate()和navigateByUrl()方法导航到指定的路由，使用依赖注入在控制器中获取
RouterLink	在HTML中声明路由导航的标签属性
ActivatedRoute	当前激活的路由对象，保存着当前路由的信息，如路由地址参数等，使用依赖注入在控制器中获取

在项目中,路由文件通常为app-routing.module.ts

配置

打开路由文件，在routes:Routes对象中定义路由列表，其中，每一个路由至少包含两个参数，即path和component也就是URL和组件的映射关系

注意：这里的path最好不要以/开头,否则会导致路由URL相对关系的混乱，Angular会自动帮你处理和子路由的关系，除非你明确知道你要做什么

app-routing.module.ts源码

 

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {HomeComponent} from './home/home.component';
import {ProductComponent} from "./product/product.component";

const routes: Routes = [
  {path:'',component:HomeComponent  },
  {path:'product',component:ProductComponent  }，
  // 放在最后，当匹配不到的时候会选择此路由 
 {path:'**',component:Code404Component}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app.module.ts修改部分

1   imports: [
2     BrowserModule,
3     AppRoutingModule
4   ],

 在Terminal里面输入 ng g component home添加home组件

插座

所谓的插座,也就是在HTML中定义的路由对应的组件插入点

使用<router-outlet></router-outlet>标签定义路由对应组件的插入位置(在该标签下面)

路由链接

使用<a [routerLink]="['/product']"> 产品列表</a>来定义一个路由导航链接。

注意：这里的路由字符串需要加上/指根路由，后面我们会使用./等来区分根路由和子路由，路由的参数是一个数组而不是字符串，因为后面我们需要给路由传递参数

传递参数

传递方式	形式	获取方式
查询参数传递（GET方法）	<a [routerLink]=['/product']  [queryParams]="{id:1}"></a>  =>   /?id=1&name=jeffrey '/product?id=1&name=Json'	ActivatedRoute.queryParams['id']
在路由路径中传递数据	{path:'product/:id'}   =>   <a [routerLink]=['/product/',1]></a> => /product/1	ActivatedRoute.params['id']
在路由配置中定义静态数据	{{path:'product/:id',component:ProductComponent,data:[{isProd:true}]}}	ActivatedRoute.data[0]['isProd']