Angular5 路由传参的3种方法
一共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
}
参考https://segmentfault.com/a/1190000012268186
3.js里的路径跳转
例如:path:/product,component:ProductComponent,data:[{madeInChina:true}]}
获取参数的方式: ActivatedRoute.snapshot.data[0][madeInChina]
Angular5 路由传参的3种方法的更多相关文章
- vue 路由传参的三种方法
API在这里 https://router.vuejs.org/guide/essentials/navigation.html 第一种传参 通过路由属性中的name来确定匹配的路由,通过param ...
- angular5 路由传参的几种方式
此处介绍三种方式 方式一: 问号后面带的参数, 例如:/product?id=1&name=iphone还可以是: [routerLink]="['/books']" [q ...
- Vue路由传参的几种方式
原 Vue路由传参的几种方式 2018年07月28日 23:52:40 广积粮缓称王 阅读数 12613 前言:顾名思义,vue路由传参是指嵌套路由时父路由向子路由传递参数,否则操作无效.传参方式 ...
- vue路由传参的三种方式区别(params,query)
最近在做一个项目涉及到列表到详情页的参数的传递,网上搜索一下路由传参,结合自己的写法找到一种适合自己的,不过也对三种写法都有了了解,在此记录一下 <ul class="table_in ...
- vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题
最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...
- Vue-router路由传参的三种方式
本文简单介绍下三种路由传参: (1)在路由中配置 { path : ‘/home/:id’, name : ‘Dome’, component } 然后写调用的时候 this.$router.push ...
- vue路由传参的几种基本方式
原文地址 this.$router.push跳转 现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据.父组件中: <li v-for="article i ...
- angularJS 传参的四种方法 【修改】
1. 基于ui-router的页面跳转传参(1) 在AngularJS的app.js中用ui-router定义路由,比如现在有两个页面,一个页面(producers.html)放置了多个produce ...
- vue-router 路由传参的几种方式,刷新页面参数丢失
常见场景:点击列表详情,跳转到详情内页,传递id参数获取详情数据. 我们先来看看路由跳转的几种方式: 1.通过params方式传参 通过$route.push的path携带参数方式 // 路由配置 { ...
随机推荐
- C# Bootstrap table之 分页
效果如图: 一.声明talbe <div class="container"> <table id="table" class="t ...
- 我对let和const理解
let和const是es6新出的两种变量声明的方式,接下来我来分别针对这两个,聊一聊. let let它的出现,我认为主要是解决了块级作用域的需求.因为js以前本身是没有什么块级作用域的概念的(顶 ...
- 解决cors跨域的filter
import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.core.Ordered; im ...
- MongoDB 更新文档
MongoDB 使用 update() 和 save() 方法来更新集合中的文档.接下来让我们详细来看下两个函数的应用及其区别. update() 方法 update() 方法用于更新已存在的文档.语 ...
- hasattr(obj,attr) 判断前面是否有后面的属性
hasattr(obj,attr) 判断前面是否有后面的属性
- 微信小程序:模板消息推送提示{“errcode”:41030,”errmsg”:”invalid page hint: [gP1eXXXXXX]”}
在开发小程序 模板消息定时推送功能时,在开发版测试程序功能运行正常,但提交到线上后提示报错{“errcode”:41030,”errmsg”:”invalid page hint: [gP1eXXXX ...
- building a new horizon
昨天是4月14日,也是我的23岁生日.正好去参加GDG举办的WTM,这次的主题是building a new horizon. 写一下印象深刻的分享者和她们的闪光点. 1.羡辙-从灵感到落地 羡辙是在 ...
- Java 内部类示例
在下面的示例中,创建了一个数组,使用升序的整数初始化它,并打印索引为偶数的数组值. public class DataStructure { // 创建一个数组 private final stati ...
- PHP 安装与配置(WIN10)
需要在本地搭个PHP的测试环境,顺手将过程写了下来. 由于不是生产环境,我这里直接选择了最新的PHP版本用来测试. 本地坏境为:windows 10 Pro 1709 PHP版本:php-7.2.3- ...
- 认识JQuery,JQuery的优势、语法、多库冲突、JS原生对象和JQuery对象之间相互转换和DOM操作,常用的方法
(一)认识JQuery JQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一套定义好的方法 JQuery的主旨:以更少的代码,实现更多的功能 (二)JQue ...