angular路由传递参数

1、查询参数中传递数据

在a标签上添加一个参数queryParams

<a [routerLink]="['/tab4']" [queryParams]="{id:3}" >tab4</a>

此时此时除了routerLink外还添加了一个queryParams设置传递的参数，传递参数为id
然后在tab4组件中接收参数
首先引入

import {ActivatedRoute} from '@angular/router';

然后再构造函数中注入

  constructor(private routerinfo:ActivatedRoute) { }

获取传来的参数，声明一个变量并把路由参数的值传给他

private id
  ngOnInit() {
  //id为参数名字
    this.id=this.routerinfo.snapshot.queryParams["id"]
  }

页面中展示id

<p>
 通过查询参数传递的id>>>{{id}}
</p>

实际效果图
这里写图片描述

2、路由路径（url）中传递参数

修改路由配置文件path还是以tab4组件为例

代码如下

  {
    path: 'tab4/:name',
    component:Tab4Component,
    children: []
  },

我们在后面添加/:name此时name即为传递的参数名字
a标签设置如下

<a [routerLink]="['/tab4','我是url传递参数']" [queryParams]="{id:3}" >tab4</a>

routerLink后面数组的第二个参数为传递的值

tab4中获取参数

private name
  ngOnInit() {
    this.name=this.routerinfo.snapshot.params['name']
  }

页面中展示name

<p>
  通过url传递的name>>>{{name}}
</p>

实际效果图
这里写图片描述

注意两获取方式有所不同一个为queryParams[‘id’]获取一个为params[‘name’]获取

ps：上面提到snapshot透过快照的方式获取值还有一种是通过订阅的方式介绍下两种方式区别

新添加一个同样路由到tab4组件的a标签只改变它的路由参数如下

<a [routerLink]="['/tab4','我是url传递参数']" [queryParams]="{id:3}" >tab4</a>
<a [routerLink]="['/tab4','改变参数']" [queryParams]="{id:123123123123}" >改变路由参数后的tab4</a>

作为比较写上以前的a标签此时仅仅是参数数值不同
回到浏览器

这里写图片描述

初次进入时参数变了但是当我再点击tab4标签时
这里写图片描述

注意看地址栏，地址栏中的参数变化了但是页面中的值并没变，即tab4组件第一次被创建时起作用了因为我们把代码写在了初始化钩子中了，现在我们修改为订阅的方式获取参数打开tab4组件

  ngOnInit() {
    // this.id=this.routerinfo.snapshot.queryParams["id"]
    // this.name=this.routerinfo.snapshot.params['name']
    this.routerinfo.queryParams.subscribe((params:Params)=>{
      this.id=params['id']
    })
    this.routerinfo.params.subscribe((params:Params)=>{
      this.name=params['name']
    })

  }

作为比较我保留着以前的获取方式
此时打开浏览器点击tab4
这里写图片描述
点击改变参数后的tab4

此时在tab4中切换已经实现了数据变更
snapshot快照和subscribe订阅差别在于订阅实时监视着数据的变化，而快照只在调用时改变一次，如果在确定路由参数只在组件初次创建时获取一次可以采用快照，如需组件内多次路由到自身修改数据采取订阅

路由配置中设置静态数据

tab4为例路由配置中设置如下ps：三种方式可以并存所以我仍然保留着以上两种方式

 {
    path: 'tab4/:name',
    component:Tab4Component,
    children: [],
    data:[{Data:'路由配置静态数据'}]
  },

tab4组件中获取并赋值数据

private data
  ngOnInit() {
    // this.id=this.routerinfo.snapshot.queryParams["id"]
    // this.name=this.routerinfo.snapshot.params['name']
    this.routerinfo.queryParams.subscribe((params:Params)=>{
      this.id=params['id']
    })
    this.routerinfo.params.subscribe((params:Params)=>{
      this.name=params['name']
    })
    //下面为新加入的
    this.data=this.routerinfo.snapshot.data[0]["Data"]

  }

页面中展示data

<p>
  通过路由配置的data>>>{{data}}
</p>

实际效果
这里写图片描述