angular4 在页面跳转的时候传递多个参数到新页面
页面跳转
router.navigate
//单一参数:
this.router.navigate(['/detail',id]); //多个参数:
this.router.navigate(['/detail'],{queryParams:{'name':'nihao'}}); router.navigateByUrl //单一参数:
this.router.navigateByUrl('/detail/id'); //多个参数:
this.router.navigateByUrl('/detail',{queryParams:{'name':'nihao'}});
在新页面接收参数
//1.snapshot
import { ActivateRoute } from '@angular/router';
public data: any;
constructor( public route: ActivateRoute ) { };
ngOnInit(){
this.data = this.route.snapshot.params['id'];
};
//2.queryParams
import { ActivateRoute } from '@angular/router';
public data: any;
constructor( public activeRoute:ActivateRoute ) { };
ngOnInit(){
this.activeRoute.queryParams.subscribe(params => {
this.data = params['name'];
});
};
angular4 在页面跳转的时候传递多个参数到新页面的更多相关文章
- Android first --- 页面跳转及数据传递
页面跳转即数据传递 创建第二个界面Acivity *需要在清单文件中添加配置一个Actuvity标签 标签中如果带有这个子节点,则会在Android中添加一个快捷图标 <intent-filte ...
- 【问题】Asp.net MVC 的cshtml页面中调用JS方法传递字符串变量参数
[问题]Asp.net MVC 的cshtml页面中调用JS方法传递字符串变量参数. [解决]直接对变量加引号,如: <button onclick="deleteProduct('@ ...
- iOS页面跳转及数据传递
转: http://blog.csdn.net/wang9834664/article/details/8025571 iOS页面跳转: 第一种 [self.navigationController ...
- 微信小程序 页面跳转navigator与传递参数
页面之间跳转使用 navigator标签,wx.navigateTo ,wx.redirectTo 1.URL就是跳转的页面路径.上面代码中就是navigator目录下的navigator页面,tit ...
- Android应用开发基础之六:页面跳转和数据传递
创建第二个Activity 需要在清单文件中为其配置一个activity标签 标签中如果带有这个子节点,则会在系统中多创建一个快捷图标 <intent-filter> <action ...
- android 学习随笔十四(页面跳转与数据传递)
1.activity 创建第二个Activity 需要在清单文件中为其配置一个activity标签 标签中如果带有这个子节点,则会在系统中多创建一个快捷图标 <intent-filter> ...
- Android初级教程理论知识(第五章页面跳转和数据传递)
总体概述: Android四大组件 Activity BroadCastReceiver Service ContentProvider 创建第二个activity 新创建的activity,必须在清 ...
- jqgrid如何在一个页面点击按钮后,传递参数到新页面
利用 Content/Scripts/dw-framework.js 中的AddTableMenu属性 <div class="Task" style="backg ...
- 在页面跳转的时候,在跳转后的页面中使用js 获取到 页面跳转的url中携带的参数。
common.js代码 //获取URL中的参数..等等function getQueryString(name){var reg = new RegExp("(^|&)"+ ...
随机推荐
- 非常简单的一个函数 竟然一直没有使用 find()
find: 在非string类型的容器里,可以直接找出所对应的元素. find函数需要几个参数:迭代器,下标值,所要找的元素 vector<int> a; find(a.begin(),a ...
- PCI总线 DMA burst 基本概念
转载地址:http://blog.csdn.net/sunjiajiang/article/details/7945057 DMA和burst不是一个概念. DMA传送不经过CPU的控制,假如硬盘的数 ...
- Android实战简易教程-第二十三枪(基于Baas的用户注冊验证username是否反复功能!)
接上一篇,加入验证用户名是否已经注冊功能! 仅仅须要改动MainActivity.java: package com.example.logintest; import java.util.List; ...
- js基本知识1
Javascript 作用 1. 网页特效 2. 用户交互 3. 表单验证 Js 就是可以用来控制 结构 和 样式 . 1.2 体验js 认识常用的三个输出语句. 都属于 js 内置对象 . 大家买手 ...
- ubuntu时钟不显示的解决方法
原文链接:http://muzi.info/articles/529.html 有时候我们会看到我们电脑的状态栏那里并没有显示时间,一个原因是日期时间指示器没有工作,另一个可能的原因是用户禁用了时间显 ...
- Ubuntu安装Nginx和正确卸载Nginx Nginx相关
1.Ubuntu下安装Nginx比较简单 敲入下列命令即可: sudo apt-get update sudo apt-get install nginx 2.Ubuntu下卸载,稍不注意就会入坑 s ...
- 浏览器 本地预览图片 window.url.createobjecturl
第一种方式 <script type="text/javascript"> function setImagePreview() { var docObj = docu ...
- python3用pillow生成验证码,tornado中输出图片
原文链接http://blog.csdn.net/cdnight/article/details/49636893
- TIM—基本定时器
本章参考资料:< STM32F4xx 参考手册>.< STM32F4xx 规格书>.库帮助文档< stm32f4xx_dsp_stdperiph_lib_um.chm&g ...
- Windows Phone 提升开发效率(一)使用d:DataContext添加设计时Binding
[问题的提出] 在开发过程中我们经常会遇到将UI同学提供的效果图转化成实际的页面,而在这过程中,多数时候Blend等设计工具默认情况下并不能提供很好的可视化支持. 举个简单的例子来说下吧: ...