页面跳转

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 在页面跳转的时候传递多个参数到新页面的更多相关文章

  1. Android first --- 页面跳转及数据传递

    页面跳转即数据传递 创建第二个界面Acivity *需要在清单文件中添加配置一个Actuvity标签 标签中如果带有这个子节点,则会在Android中添加一个快捷图标 <intent-filte ...

  2. 【问题】Asp.net MVC 的cshtml页面中调用JS方法传递字符串变量参数

    [问题]Asp.net MVC 的cshtml页面中调用JS方法传递字符串变量参数. [解决]直接对变量加引号,如: <button onclick="deleteProduct('@ ...

  3. iOS页面跳转及数据传递

    转: http://blog.csdn.net/wang9834664/article/details/8025571 iOS页面跳转: 第一种 [self.navigationController  ...

  4. 微信小程序 页面跳转navigator与传递参数

    页面之间跳转使用 navigator标签,wx.navigateTo ,wx.redirectTo 1.URL就是跳转的页面路径.上面代码中就是navigator目录下的navigator页面,tit ...

  5. Android应用开发基础之六:页面跳转和数据传递

    创建第二个Activity 需要在清单文件中为其配置一个activity标签 标签中如果带有这个子节点,则会在系统中多创建一个快捷图标 <intent-filter> <action ...

  6. android 学习随笔十四(页面跳转与数据传递)

    1.activity 创建第二个Activity 需要在清单文件中为其配置一个activity标签 标签中如果带有这个子节点,则会在系统中多创建一个快捷图标 <intent-filter> ...

  7. Android初级教程理论知识(第五章页面跳转和数据传递)

    总体概述: Android四大组件 Activity BroadCastReceiver Service ContentProvider 创建第二个activity 新创建的activity,必须在清 ...

  8. jqgrid如何在一个页面点击按钮后,传递参数到新页面

    利用 Content/Scripts/dw-framework.js 中的AddTableMenu属性 <div class="Task" style="backg ...

  9. 在页面跳转的时候,在跳转后的页面中使用js 获取到 页面跳转的url中携带的参数。

    common.js代码 //获取URL中的参数..等等function getQueryString(name){var reg = new RegExp("(^|&)"+ ...

随机推荐

  1. Mysql时间存储类型优缺点?DATETIME?TIMESTAMP?INT?

    TIMESTAMP 4个字节储存;值以UTC格式保存;.时区转化 ,存储时对当前的时区进行转换,检索时再转换回当前的时区. DATETIME 8个字节储存;实际格式储存;与时区无关;datetime  ...

  2. POJ3187 Backward Digit Sums 【暴搜】

    Backward Digit Sums Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 4487   Accepted: 25 ...

  3. GameObject非激活状态,触发测试

    测试结果为OnEnable,Start不执行.Awake不管激活未激活都执行 不管是驻留在层级面板,还是手动拖上去. 但是,在任何时间设为激活.就会2个都触发.Awake和Start只触发一次.这个问 ...

  4. IOS 获取设备屏幕的尺寸

    // 不包含状态栏 CGRect rect1 = [UIScreen mainScreen].applicationFrame; // 包含状态栏(整个屏幕) CGRect rect2 = [[UIS ...

  5. linux 编译kernel与svn版本冲突解决方法 [drivers/gpu/mali/mali/common/mali_kernel_core.o] 错误 1

    问题: 系统正常编译linux系统kernel,安装svn后,kernel编译出错. 错误: CHK     include/linux/version.h  CHK     include/gene ...

  6. 如何只利用NMAKE+CL+LINK写WIN32程序

    关键是1.包含<Windows.h>及其他的相关头文件2.在LINK指令中最起码要加上KERNEL32.LIB USER32.LIB GDI32.LIB(不需要制定其路径,因为NMAKE, ...

  7. eclipse中tomcat配置JNDI链接Oracle数据源例子

    最近换到新公司,第一次接触JNDI方式连接数据库. 一开始怎么找也没找到数据库地址在哪里配置的,后面跟代码发现spring中初始化dataSource是通过这个类JndiObjectFactoryBe ...

  8. mq和redis安装

    [root@129-2-10-8 src]# cat b.sh #!/bin/bash ####install redis software #####echo "############# ...

  9. 数据库 Oracle数据库对象二

    视图 --视图是对表逻辑抽象 --视图的好处:简化查询 --视图是一种虚表 --视图建立在已有表的基础上,视图赖以建立的这些吧称为基表. --向视图提供数据内容的语句为select语句,可以将视图理解 ...

  10. 011杰信-创建购销合同Excel报表系列-4-建立合同货物(修改,删除):合同货物表是购销合同表的子表

    前面的一篇文章做的是修改删除,这篇文章做的是合同货物的修改和删除. 业务功能如下: