详解Angular5 路由传参的3种方法

本文介绍了Angular5 路由传参，一共3种方法。分享给大家，具体如下：

1.问号后面带的参数，获取参数的方式：ActivatedRoute.queryParams[id]

例如：/product?id=1&name=iphone还可以是： [ routerLink]= "['/books']" [ queryParams]= "{bookname:'《活着》'}

代码：html

<h4>Messages</h4>
<p>Total:{{msgs.total}}</p>
<div *ngFor="let item of msgs.data">
 <b>{{item.name}}</b>:
 <a [routerLink]="['/next',item.id]" [queryParams]="{id:item.id, msg:item.msg, name:item.name}">{{item.msg}}</a>
 <a routerLink="/final">Reply</a><p></p>
</div>

获取参数js

ngOnInit() {
 let obj = this.route.queryParams["_value"];
 console.log(obj);
}

2.冒号形式，

例如：path:/product/:id

获取参数的方式：ActivatedRoute.params[id]

上边html代码中第一个routelink就是。

另外需配置路由

{
 path:'listDetail/:id',
 component:ListDetailComponent
 }

参考//www.jb51.net/article/139125.htm

3.js里的路径跳转

例如：path:/product,component:ProductComponent,data:[{madeInChina:true}]}

获取参数的方式： ActivatedRoute.snapshot.data[0][madeInChina]

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • angular.js 路由及页面传参示例

    页面传参数方法:1.$rootScope.2.(url)/user/:name/:age. 页面转换方法:1.href="#/" rel="external nofollow" rel="external nofollow" rel="external nofollow" .2.$state.Go.3.$location.path.4.ui-sref (1)自带路由ngRoute <html> <head&g

  • 详解Angular5 路由传参的3种方法

    本文介绍了Angular5 路由传参,一共3种方法.分享给大家,具体如下: 1.问号后面带的参数,获取参数的方式:ActivatedRoute.queryParams[id] 例如:/product?id=1&name=iphone还可以是: [ routerLink]= "['/books']" [ queryParams]= "{bookname:'<活着>'} 代码:html <h4>Messages</h4> <p&g

  • 详解Vue路由传参的两种方式query和params

    Vue路由传参的两种方式query和params 一.router-link 1. 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始. 2.带参数 <router-link :to=&

  • 详解React路由传参方法汇总记录

    详解React路由传参方法汇总记录

    React中传参方式有很多,通过路由传参的方式也是必不可少的一种. 本文记录项目中会用到的路由传参方式: 路由跳转传参API + 目标路由获取参数的方式. 一.动态路由 跳转方法 Link <Link to={{ pathname: "/user/add/1" }}>跳转新增页面</Link> history.push this.props.history.push("/user/add/1"); 获参方法 this.props.match.

  • 详解python函数传参传递dict/list/set等类型的问题

    传参时传递可变对象,实际上传的是指向内存地址的指针/引用 这个标题是我的结论,也是我在做项目过程查到的.学过C的都知道,函数传参可以传值,也可以传指针.指针的好处此处不再赘述. 先上代码看看效果: def trans(var): return var source = {1: 1} dist = trans(source) source[2] = 2 print(source) print(dist) 运行结果: {1: 1, 2:2} {1: 1, 2:2} 可以看到改变了source时,di

  • 浅谈react路由传参的几种方式

    浅谈react路由传参的几种方式

    第一种传参方式,动态路由传参 通过设置link的path属性,进行路由的传参,当点击link标签的时候,会在上方的url地址中显示传递的整个url <Link to='/home?name=dx'>首页</Link> 如果想真正获取到传递过来的参数,需要在对应的子组件中 this.props.location.search 获取字符串,再手动解析 因为传参能够被用户看见,传递获取比较麻烦,所以不推荐 第二种传参方式,隐式路由传参 <Link to={{ pathname: '

  • 详解Git建立本地仓库的两种方法

    Git是一种分布式版本控制系统,通常这类系统都可以与若干远端代码进行交互.Git项目具有三个主要部分:工作区,暂存目录,暂存区,本地目录: 安装完Git后,要做的第一件事,就是设置用户名和邮件地址.每个Git提交都使用此信息,并且将它永久地烘焙到您开始创建的提交中: $ git config --global user.name "John Doe" $ git config --global user.email johndoe@example.com 之后我们可以建立一个本地仓库.

  • 详解用Python处理Args的3种方法

    1. sys 模块 Python 中的 sys 模块具有 argv 功能.当通过终端触发 main.py 的执行时,此功能将返回提供给 main.py 的所有命令行参数的列表.除了其他参数之外,返回列表中的第一个元素是 main.py 的路径. 考虑下面的 main.py 示例 import sys list_of_arguments = sys.argv print(list_of_args[0]) print(list_of_args[1]) print(list_of_args[2]) p

  • 详解JavaScript中分解数字的三种方法

    本文基于免费代码营基本算法脚本"分解数字" 在数学中,非负整数n的阶乘可能是一个棘手的算法.在本文中,我将解释这种方法,首先使用递归函数,第二种使用而循环,第三种使用以循环. 算法挑战 返回提供的整体的阶乘. 如果整体用字母n表示,则阶乘是所有小于或等于n的正整数的乘积. 阶乘经常用简写符号n!表示! 例如:5!= 1 * 2 * 3 * 4 * 5 = 120 function factorialize(num) { return num; } factorialize(5); 提供

  • 详解Python实现图像分割增强的两种方法

    方法一 import random import numpy as np from PIL import Image, ImageOps, ImageFilter from skimage.filters import gaussian import torch import math import numbers import random class RandomVerticalFlip(object): def __call__(self, img): if random.random()

  • 详解Python实现字典合并的四种方法

    目录 1.用for循环把一个字典合并到另一个字典 2.用dict(b, **a)方法构造一个新字典 3.用b.update(a)的方法,更新字典 4.把字典转换成列表合并后,再转换成字典 (1)利用a.items().b.items()把a.b两个字典转换成元组键值对列表 (2)合并列表并且把合并后的列表转换成字典 5.实例,netmiko使用json格式的数据进行自动化操作 (1)json格式的处理 (2)json格式的设备信息列表 (3)netmiko读取json类型信息示例 1.用for循

随机推荐