详解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 相关文章推荐
JavaScript事件列表解说
Dec 22 Javascript
javascript arguments使用示例
Dec 16 Javascript
JS弹出可拖拽可关闭的div层完整实例
Feb 13 Javascript
jQuery图片特效插件Revealing实现拉伸放大
Apr 22 Javascript
javascript+ajax实现产品页面加载信息
Jul 09 Javascript
一个字符串中出现次数最多的字符 统计这个次数【实现代码】
Apr 29 Javascript
去除字符串左右两边的空格(实现代码)
May 12 Javascript
Vue.js每天必学之构造器与生命周期
Sep 05 Javascript
基于JavaScript实现Tab选项卡切换效果
Nov 24 Javascript
深入浅出理解JavaScript高级定时器原理与用法
Aug 02 Javascript
layui点击按钮添加可编辑的一行方法
Aug 15 Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
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
NOT NULL 和NULL
2007/01/15 PHP
PHP UTF8编码内的繁简转换类
2009/07/20 PHP
php文件下载处理方法分析
2015/04/22 PHP
php中str_pad()函数用法分析
2017/03/28 PHP
js兼容标准的表格变色效果
2008/06/28 Javascript
一步一步教你写一个jQuery的插件教程(Plugin)
2009/09/03 Javascript
jquery中输入验证中一个不错的效果
2010/08/21 Javascript
js实现的跟随鼠标移动的时钟效果(中英文日期显示)
2011/01/17 Javascript
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
2011/02/24 Javascript
判断js对象是否拥有某一个属性的js代码
2013/08/16 Javascript
JS鼠标滑过图片时切换图片实现思路
2013/09/12 Javascript
jquery 扑捉回车键事件代码
2014/04/24 Javascript
jQuery 获取、设置HTML或TEXT内容的两种方法
2014/05/23 Javascript
Javascript 赋值机制详解
2014/11/23 Javascript
jQuery动画效果相关方法实例分析
2015/12/31 Javascript
分享几种比较简单实用的JavaScript tabel切换
2015/12/31 Javascript
JS打印组合功能
2016/08/04 Javascript
vue2项目使用sass的示例代码
2017/06/28 Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
2017/11/10 jQuery
图解javascript作用域链
2019/05/27 Javascript
基于javascript实现贪吃蛇小游戏
2019/11/25 Javascript
python开发之IDEL(Python GUI)的使用方法图文详解
2015/11/12 Python
CentOS中升级Python版本的方法详解
2017/07/10 Python
Python3基于sax解析xml操作示例
2018/05/22 Python
pytorch 实现张量tensor,图片,CPU,GPU,数组等的转换
2020/01/13 Python
css3实现wifi信号逐渐增强效果实例
2017/08/09 HTML / CSS
HTML5中FileReader接口使用方法实例详解
2017/08/26 HTML / CSS
教导处工作制度
2014/01/18 职场文书
个人授权委托书范本
2014/04/03 职场文书
勾股定理课后反思
2014/04/26 职场文书
防灾减灾活动总结
2014/08/30 职场文书
信仰纪录片观后感
2015/06/08 职场文书
[有人@你]你有一封绿色倡议书,请查收!
2019/07/18 职场文书
ThinkPHP5和ThinkPHP6的区别
2021/03/31 PHP
PyQt5 QThread倒计时功能的实现代码
2021/04/02 Python
PyQt5结合QtDesigner实现文本框读写操作
2021/06/11 Python