angular4路由（路由传递参数）

angular4路由（路由传递参数）

1.当页面输入一个存在的地址的时候会报错。这个时候需要设置一个空页面提示用户此页面不存在。这个空页面需要用一个通配符来配置路由导航。注意的是通配符的路由必须放在最后来配置路径，避免一开始查找路径，还未遍历所有路径就已经跳入通配符路由的页面。

{path:'',component:HomeComponent},
{path:'product',component:ProductComponent},
{path:'home',component:HomeComponent},
{path:'**',component:Code404Component}

2.在路由中传递参数：

1.在查询参数中传递参数

商品详情

添加一个指令，这个指令指到一个对象上，当点击商品详情的时候会带着id=1这个参数调到商品详情页

结果：http://localhost:4200/product?id=1（?id=1就是从路由里面传递过来的参数）

那么怎么样接收这个参数呢？

就需要在接收参数的页面里面注入ActivateRoute

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params} from '@angular/router';

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {
  constructor(private routerIonfo:ActivatedRoute) { }
  ngOnInit() {
  }

}

注入之后在本地创建一个变量productId来接收传递过来的参数：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params} from '@angular/router';

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {
  private  productId:number;
  constructor(private routerIonfo:ActivatedRoute) { }
  ngOnInit() {
    this.productId=this.routerIonfo.snapshot.queryParams["id"];
  }

获取到了ID后可以在商品详情页用差值表达式将其显示在页面上

商品ID是{{productId}}

2.在URL在路由路径path中传递数据

在path中传递参数就需要先修改原有的路径使其可以携带参数。修改前：

const routes:Routes=[
  {path:'',component:HomeComponent},
  {path:'product',component:ProductComponent},
  {path:'home',component:HomeComponent},
  {path:'**',component:Code404Component}
];

修改后：

const routes:Routes=[
  {path:'',component:HomeComponent},
  {path:'product',component:ProductComponent},
  {path:'home/:id',component:HomeComponent},//整个路径被划分成两段变量，一段是路径，一段时参数
  {path:'**',component:Code404Component}
];

修改完成后需要在路由的链接处也就是路由的入口处修改入口属性，用来传递路由所携带的参数值；

主页
商品详情
主页这里的routerLink是一个数组，第一个值为路由的跳转路径，第二值为路由携带参数的值，这里传递的值为2

页面结果：

http://localhost:4200/home/2

最后一步获取传递的这个参数：

获取参数值是从URL里面取，和查询参数一样的获取方法，唯一不一样的就是把从查询参数里面获取值变成从URL里面获取，只需要将queryParams改为params就可以了：

export class HomeComponent implements OnInit {
  private  homeId:number;
  constructor(private routerIonfo:ActivatedRoute) { }
  ngOnInit() {
    this.homeId=this.routerIonfo.snapshot.params["id"];
  }

}

最后用插值表达式在页面显示即可

特别注意的是不能同时使用参数查询方式和路由路径Url 方式传递同一个页面的参数；否则报错

例如：已经使用了参数查询方式

商品详情

再使用路由路径方式传递参数将报错：该路径找不到或者直接跳通配符路径404

detail(){
  this.router.navigate(['/product',1]);
}

最后记录一下参数订阅和参数快照：

首先什么是参数快照：获取路由中传递的参数的值得一个方法就用到了参数快照。snapchot

理解：在home里面采用了两个参数：

detail(){
  this.router.navigate(['/home',1]);
}

主页

这里在路由路径中想home同时传递了两个参数，1和2，

当在页面第一次加载的时候会创建一次主页，将2这个值传入页面，当点击按钮出发detail事件的时候也会导航到主页，但是在此之前主页已经被创建，并赋值，此时导航到主页，主页并不会再次被创建，所以自然不会再次获取第二次导航过来的路由所携带的参数和值，但是路径变为了http://localhost:4200/home/1

然而页面上的值仍然是2，获取当前路由所传递的参数值失败。这就是参数快照的弱点，为了解决这个问题引入了参数订阅：subscribe()

this.routerIonfo.params.subscribe((params:Params)=>this.homeId=params["id"]);

采用参数订阅的方式subscribe()获取到一个类型为Params的属性params，并返回params里面的Id复制给本地变量homeID，这样就不会出现路径在变，但是陆经理面的参数值不变的情况；

只有当你确定你的页面不会从自身路由到自身，或者只有一只方式路由到此页面的话就可以使用参数快照方式，不确定的话最好使用参数订阅的方式。

重定向路由：

指在用户访问一个特定的地址时，将其重定向到另一个指定的地址；

{path:'',redirectTo:'/home',pathMatch:'full'},
{path:'product',component:ProductComponent},
{path:'home/:id',component:HomeComponent},//整个路径被划分成两段变量，一段是路径，一段时参数
{path:'**',component:Code404Component}