一、介绍
- angular使用SPA，只是改变页面上部分内容的应用。angular中使用路由器实现根据用户操作改变页面内容而不重新加载页面。
- 路由器：控制整个视图状态的对象。
- 路由器为每个视图状态分配一个唯一的url，利用url使应用跳到某个特定的视图状态。
命令：ng new router --routing
路由相关对象
| 名称 | 简介 |
|---|---|
| Routes | 路由配置，保存着哪个URL对应展示哪个组件，以及在哪个RouterOutlet中展示组件 |
| RouterOutlet | 在Html中标记路由内容呈现位置的占位符指令 |
| Router | 负责在运行时执行路有对象，可以通过调用其navigate()和navigateByUrl()方法来导航到一个指定的路由 |
| RouterLink | 在Html中声明路由导航用的指令 |
| ActivatedRoute | 当前激活的路由对象，保存着当前路由的信息，如路由地址，路由参数等 |
Router和Routerlink作用一样，用来让应用导航到指定的路由上，router在控制器中使用，通过调用方法进行导航；RouterLink在Html模板中，用在a标签上。
应用组成
-
angular应用由一些组件构成，每个组件都有自己的模板和控制器，应用在启动后首先展示AppComponent模板，所有的组件都被封装在一个模块中，而路由的配置（Routes对象）存在在模块中。
-
Routes对象由一组配置信息组成，每个配置信息至少包含两个属性。
- path属性用来指定浏览器中的url。
- component属性用来指定相应的组件
说明：
- 在模板中使用RouterOutlet指令指定组件位置；
- RouterLink指令在模板上生成一个链接到其他组件的链接；
- 在组件的控制器中调用Router对象的navigate方法改变浏览器地址，实现路由转换；
- 在路由时通过url传递数据，这些数据保存在ActivatedRoute中（如：从组件A路由到组件B时，组价B中的ActivatedRoute对象来获取url中携带的参数）。
二、使用
项目文件
- 使用
ng new router --routing生成的项目比ng new project生成的项目多生成路由配置文件—app-routing.module.ts，生成了AppRoutingModule模块； - 在
app.module.ts中会有声明，引入AppRoutingModule模块，如下：
import { AppRoutingModule } from './app-routing.module';路由配置
- 创建两个组件；
- 在
app-routing.modult.ts中配一个空路由；
const routes: Routes = [
{path: '', component: HomeComponent}
];注： 在做路由配置时path属性不要用'/'开头，因为angular本身会根据path的值做相应的解析生成url。
- 在
app.component.html中自动加入<router-outlet></router-outlet> - link访问路由写法：
<a [routerLink]="['/']">主页</a> - 通过调用方法访问路由的写法：
<input type="button" value="我是详情" (click)="toStockDetail()">方法在app.component.ts中声明：
import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
constructor(private router: Router){
}
toStockDetail(){
this.router.navigate(['/stock']);
}
}
- 当用户访问的路由不存在时，页面出错，可以通过配置通配符解决问题。 创建一个新的组件，在路由配置中加
{path: '**', component: Code404Component}
注： 通配符写在整个路由配置的最后面。
数据传递
方式
-
在查询参数中传递数据
- 路由路径？参数名=参数值
- /product?id=1&name=2 => ActivatedRoute.
queryParams[id]
-
在路由路径中传递数据
- 指定路由路径加参数名=>在实际路径中携带的参数=>调用
- {path:/product/:id}=>/product/1=>ActivatedRoute.
params[id]
-
在路由配置中传递数据
- 通过data参数定义静态数据，data本身为数组。
- {path: /product, component: ProductComponent, data:[{isProd:true}]}=>ActivatedRoute.
data[0][isProd]
-
在url中传递参数
- 修改路由配置中的path属性，使其可以携带参数。
- {path:
'stock/:id', component: ProductComponent, data:[{isPro:true}]} - 修改路由链接，让链接在跳转时携带参数。
- <a [routerLink]=
"['/stock',1]">url获取参数</a>
参数快照与参数订阅
- 参数快照：传参方式与前面记录相同。当从主页跳转到详情页时，详情页组件被创建，调用ngOnInit()方法，但是，当详情页跳转到详情页时（两个传参不同），组件不会被重新创建，ngOnInit()方法在同一组件路由到自身时不会被调用。
this.id = this.routerInfo.snapshot.params["id"]- 参数订阅：订阅方式改变参数值时，每当路由参数变换时，匿名的方法都会被调用一次。
this.routerInfo.params.subscribe((params:Params)=>this.id = params["id"])重定向路由
{path: '', redirectTo: '/home',pathMatch:'full'}pathMatch:'full'表示只有访问路径是精准的空字符串时才跳转到/home上。
{path: 'xx', redirectTo: '/home',pathMatch:'prefix'}pathMatch:'prefix'表示路径是以“xx”开头就可跳转到/home上。
子路由
在原有路由的基础上加children属性。将router-outlet声明在哪个子路由就会显示在哪儿。由于声明的是子路由，在访问子路由时是不能以“/”开头的，“/”开头代表在主路由中找，子路由以“./”开头。
- 子路由可以一直嵌套；
- 路由信息和组件是分离的。
{path: 'stock', component: StockComponent,
children:[
{path: '', component:BuyerListComponent},
{path: 'seller/:id', component:SellerListComponent}
]
}辅助路由
在每个页面都有的一些侧边导航，会用到辅助路由。
- 在组件模板上除了外，还需要声明一个带name属性的。
- 在路由配置中去配置aux可以显示哪些组件。
{path: 'consult', component: ConsultComponent,outlet:"aux"}- 导航时指定在路由到某个地址时，辅助路由上需要显示哪个组件。
<a [routerLink]="[{outlets: {aux: 'consult'}}]">开始</a><br>说明：主路由的内容也可以控制，主路由没有设置名字，它有一个默认的关键字——primary，在aux前面加上primary:'home'，然后点击，主路由跳转到home。
路由守卫
路由守卫是一些拦截器，可以配在路由上面，在我们进入路由或离开路由之前执行一些逻辑。
| 守卫 | 简介 |
|---|---|
| CanActivate | 处理导航到某路由的情况，在导航到某路由前去执行一些判断，然后决定是否让当前导航生效。 |
| CanDeactivate | 处理从当前路由离开的情况。 |
| Resolve | 在路由激活之前获取路由数据，有助于提高用户体验。 |