详解Angular5路由传值方式及其相关问题


Posted in Javascript onApril 28, 2018

目前Angular已经升级到了稳定版本Angular5,这次升级更小更快以及更稳定!路由可以说是Angular甚至是单页应用的核心部分了吧!在angularjs中的路由最大的缺点就是无法嵌套路由,在Angular中解决了这个问题!在Angular中路由不仅仅是页面跳转,其中还有一项叫英雄列表跳转英雄详情!在诸多的列表,不可能给每个英雄做一个详情页,于是乎路由参数起到作用了!通过路由传入参数识别那个英雄的详情!

现在对于路由传值进行详解,首先一种方式是官网的导航到详情的单值id传入,另一种是多数据传入!

1.单值传入

['/hero', hero.id]
<ul class="items">
  <li *ngFor="let hero of heroes$ | async"
   [class.selected]="hero.id === selectedId">
   <a [routerLink]="['/hero', hero.id]">
    <span class="badge">{{ hero.id }}</span>{{ hero.name }}
   </a>
  </li>
 </ul>

以上是官网示例

下面我们用我自己的示例介绍一下:

首先是列表页,以及跳转方式

<p *ngFor="let item of items" [routerLink]="['/listDetail',item.id]">{{item.name}}</p>

然后是配置路由:(单值传入的方式需要在详情组件路由配置)

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

传入后就是取到参数,在详情组件的ngOnInit生命周期获取参数

ngOnInit() {
  this.route.params
   .subscribe((params: Params) => {
    this.id = params['id'];
    console.log(this.id);
    console.log('传值');
    console.log(params)
   })
 }

2.我们在平时的复杂的业务场景我们需要传多个数据,这时候该怎么办呢?这时候我们就用到了queryParams

<p *ngFor="let data of datas" [routerLink]="['/listDetails']" [queryParams]="{id:data.id,state:data.state}">{{data.name}}</p>

这里数据我是直接拿上去的,同样你可以组织好数据,一个参数放上去,简化html结构,现在有个问题,这样多值传入路由参数怎么配置呢?/:id/:id???我这个参数多少也不是固定的咋办?其实这种方式不需要配置路由!你只需要传入和取到数据就可以了!

ngOnInit() {
  this.route.queryParams
   .subscribe((params: Params) => {
    this.id = params['id'];
    this.state = params['state'];
    console.log(params)
    console.log(this.id);
    console.log(this.state);

   })
 }

以上就是Angular路由传值两种方式!希望对大家有帮助!也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一段非常简单的让图片自动切换js代码
Nov 10 Javascript
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
Mar 05 Javascript
Jquery 例外被抛出且未被接住原因介绍
Sep 04 Javascript
JQuery中extend使用介绍
Mar 13 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
Dec 21 Javascript
Bootstarp 基础教程之表单部分实例代码
Feb 03 Javascript
JavaScript编写一个贪吃蛇游戏
Mar 09 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
Apr 18 Javascript
jquery dataTable 后台加载数据并分页实例代码
Jun 07 jQuery
css配合JavaScript实现tab标签切换效果
Oct 11 Javascript
vue通过cookie获取用户登录信息的思路详解
Oct 30 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
Sep 03 Javascript
详解Angular5 路由传参的3种方法
Apr 28 #Javascript
深入理解Vue nextTick 机制
Apr 28 #Javascript
jQuery实现的电子时钟效果完整示例
Apr 28 #jQuery
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 #jQuery
Vue实现PopupWindow组件详解
Apr 28 #Javascript
详解angular路由高亮之RouterLinkActive
Apr 28 #Javascript
vue弹窗组件使用方法
Apr 28 #Javascript
You might like
解析thinkphp中的导入文件标签
2013/06/20 PHP
PHP 用session与gd库实现简单验证码生成与验证的类方法
2016/11/15 PHP
Javascript String对象扩展HTML编码和解码的方法
2009/06/02 Javascript
JavaScript中使用replace结合正则实现replaceAll的效果
2010/06/04 Javascript
JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结
2011/06/28 Javascript
js动态添加onload、onresize、onscroll事件(另类方法)
2012/12/26 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
2014/11/28 Javascript
js改变embed标签src值的方法
2015/04/10 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
2015/08/14 Javascript
javascript中eval和with用法实例总结
2015/11/30 Javascript
javascript实现查找数组中最大值方法汇总
2016/02/13 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
2016/06/16 Javascript
easyui combogrid实现本地模糊搜索过滤多列
2017/05/13 Javascript
JavaScript中Object值合并方法详解
2017/12/22 Javascript
node中modules.exports与exports导出的区别
2018/06/08 Javascript
vue和webpack安装命令详解
2018/06/15 Javascript
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
2019/07/10 Javascript
Python Property属性的2种用法
2015/06/21 Python
Python模拟百度登录实例详解
2016/01/20 Python
关于Pycharm无法debug问题的总结
2019/01/19 Python
Python3 实现串口两进程同时读写
2019/06/12 Python
Python DataFrame使用drop_duplicates()函数去重(保留重复值,取重复值)
2020/07/20 Python
python中return不返回值的问题解析
2020/07/22 Python
使用CSS3和Checkbox实现JQuery的一些效果
2015/08/03 HTML / CSS
瑞士首家网上药店折扣店:McDrogerie
2020/12/22 全球购物
办公室主任职责范本
2014/03/07 职场文书
会计工作决心书
2014/03/11 职场文书
赡养老人协议书
2014/04/21 职场文书
安全保证书范文
2014/04/29 职场文书
教师党员岗位承诺书
2014/05/29 职场文书
分公司经理任命书
2014/06/05 职场文书
拆迁委托协议书
2014/09/15 职场文书
会计试用期自我评价
2015/03/10 职场文书
导游词之湖北梁子湖
2019/11/07 职场文书
redis cluster支持pipeline的实现思路
2021/06/23 Redis
【海涛教你打DOTA】死灵飞龙第一视角解说
2022/04/01 DOTA