Angular Route导航

我们用Angular cli创建带有路由的新项目

ng new router --routing

Angular Routes API文档

Angular的文档中有详细的解释:

1）https://angular.cn/docs/ts/latest/api/router/index/Routes-type-alias.html
2）https://angular.cn/docs/ts/latest/guide/router.html#

文档学习：

1）Wild Cards（通配符）

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

>注意：配置路由，一定要记得引入文件

import {Code404Component} from "./code404/code404.component"

> 通配符路由的path是两个星号（'**'），它会匹配任何URL。 当路由器匹配不上以前定义的那些路由时，它就会选择<这个>路由。 通配符路由可以导航到自定义的“404 Not Found”组件，也可以[重定向](https://angular.cn/docs/ts/latest/guide/router.html#redirect)到一个现有路由。

2）关于参数的快照（snapshot）和参数的订阅（subscribe）

export class ProductComponent implements OnInit {
 
private productId : number ;
//给ProductComponent设置一个属性（属性名是productId，属性类型是number）
 
constructor(private routerInfo : ActivatedRoute) { }
//ActivatedRoute当前路由激活的对象，保存着当前路由的信息，比如路由地址和路由参数
 
ngOnInit() {
this.productId = this.routerInfo.snapshot.queryParams["id"]; //参数快照
this.routerInfo.params.subscribe((params:Params) => this.productId = params ["id"]); //参数订阅
}
}

参数快照和参数订阅的区别：

>比如API中的这个图片，
参数快照：点了crisis后再点heroes，然后再点crisis是回不去的。
参数订阅：可以一直切换下去

3）在路由时传递数据（3种方法）
a.在查询参数中传递数据：

/product?id = 1&name = 2 => ActivatedRoute.queryParams[id]

b.在路由的路径中传递数据：

{path:/product/:id} => /product/1 => ActivatedRoute.params[id]

c.在路由配置中传递数据

{path:/product,component；ProductComponent，data：[{isProd:true}] }
=> ActivateRoute.data[0][isProd]

4）路由重定向

添加一个redirect路由来把最初的相对路径（''）转换成期望的默认路径（/home）。 浏览器地址栏会显示.../home，就像你直接导航到那里一样。

const routes:Routes = [
{path : '' , redirectTo:'/home' , pathMath : 'full'},
{path : 'home' , component: HomeComponent},
]
//把当前的路由重定向到home路由上

重定向路由需要一个pathMatch属性，来告诉路由器如何使用URL去匹配路由的路径，否则路由就会报错，因此要把pathMacth设置为'full'