您现在的位置是:首页 > 正文

angular路由传递参数

2024-04-01 00:31:17阅读 4

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订阅差别在于订阅实时监视着数据的变化,而快照只在调用时改变一次,如果在确定路由参数只在组件初次创建时获取一次可以采用快照,如需组件内多次路由到自身修改数据采取订阅


3、 路由配置中设置静态数据

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>

实际效果
这里写图片描述

网站文章

  • linux shell 除法运算符,Linux shell 基本运算符详解

    shell 支持多种运算符1.算数运算符2.关系运算符3.布尔运算符4.字符串运算符5.文件测试运算符原生bash不支持简单的数学运算,但是可以通过其他命令来实现,例如 awk 和 expr,expr...

    2024-04-01 00:30:50
  • 《奔跑吧Linux内核(第二版)》第三章笔记

    《奔跑吧Linux内核(第二版)》第三章笔记

    ARM64架构基础知识

    2024-04-01 00:30:40
  • 【网络编程】更强的IO复用模型:epoll

    【网络编程】更强的IO复用模型:epoll

    epoll可以说是和poll非常相似的一种I/O多路复用技术,epoll通过监控注册的多个描述字,来进行I/O事件的分发处理。不同于poll的是,epoll不仅提供了默认的level-triggere...

    2024-04-01 00:30:18
  • 缓存穿透、缓存击穿、缓存雪崩概念及解决方案

    缓存穿透概念访问一个不存在的key,缓存不起作用,请求会穿透到DB,流量大时DB会挂掉。解决方案采用布隆过滤器,使用一个足够大的bitmap,用于存储可能访问的key,不存在的key直接被过滤;访问key未在DB查询到值,也将空值写进缓存,但可以设置较短过期时间。缓存雪崩概念大量的key设置了相同的过期时间,导致在缓存在同一时刻全部失效,造成瞬时DB请求量大、压力骤增,引起雪崩...

    2024-04-01 00:30:12
  • python if和条件判断

    逻辑关键字==, !=, &gt;, &lt;, &gt;=, &lt;= 这些都和C一样and, or 逻辑与或in, not in 在不在列表中ifif True: print(&quot;Tru...

    2024-04-01 00:30:04
  • html5 css3 实现连线功能

    猫 height: 50px; width: 100px; border: solid 3px #f00;&quot;&gt; dog 狗 height: 50px; width: 100px; border: solid 3px #f00;&quot;&gt; cow 牛

    2024-04-01 00:29:34
  • NS3数据包时延计算-插入时间戳Tag

    NS3数据包时延计算-插入时间戳Tag

    如果要在接收端得到数据包的传输时延,那么就需要在接收端得到数据包的发送时间和数据包到达时间,后者非常简单,直接在收到包的时候Simulator::Now ().GetSeconds ()即可,而怎样得...

    2024-04-01 00:29:25
  • 山东大学计算机技术复试体验

    博主7月开始的准备考研,现在比较难受,希望大家早做准备,暑假开始复习,慎重择校。 博主是初试375分,70名,双非二本。一志愿收27个,400以上的20+,复试比接近4:1,复试线360,抱着我已经录...

    2024-04-01 00:29:18
  • LeetCode 125.验证回文串 C++

    题目描述 给定一个字符串,验证它是否是回文串,只考虑字母和数字字符,可以忽略字母的大小写。 说明:本题中,我们将空字符串定义为有效的回文串。 示例 1: 输入: &quot;A man, a plan...

    2024-04-01 00:28:55
  • java中byte[]、buffer、string转换 热门推荐

    将原数组数据拷贝到目的数组 System.arraycopy(src, Srcposition, dst, DstPosition,dstLength); 将字节数组转换成字节缓冲区 ByteBuffer buffer = ByteBuffer.wrap(Bytes[]); 目前buffer存在的位置与buffer的容量 buffer.position() 将buffer读取

    2024-04-01 00:28:47