使用routerLink跳转

  • <a routerLink=["/exampledetail",id]></a>
  • <a routerLink=["/exampledetail",{queryParams:object}] ></a>

使用navigate跳转

  import { Router } from '@angular/router';

  1. this.router.navigate(['user', 1]);
    以根路由为起点跳转
  2. this.router.navigate(['user', 1],{relativeTo: route});
    默认值为根路由,设置后相对当前路由跳转,route是ActivatedRoute的实例,使用需要导入ActivatedRoute
  3. this.router.navigate(['user', 1],{ queryParams: { id: 1 } });
    路由中传参数 /user/1?id=1
  4. this.router.navigate(['view', 1], { preserveQueryParams: true });
    默认值为false,设为true,保留之前路由中的查询参数/user?id=1 to /view?id=1
  5. this.router.navigate(['user', 1],{ fragment: 'top' });
    路由中锚点跳转 /user/1#top
  6. this.router.navigate(['/view'], { preserveFragment: true });
    默认值为false,设为true,保留之前路由中的锚点/user/1#top to /view#top
  7. this.router.navigate(['/user',1], { skipLocationChange: true });
    默认值为false,设为true路由跳转时浏览器中的url会保持不变,但是传入的参数依然有效
  8. this.router.navigate(['/user',1], { replaceUrl: true });
    未设置时默认为true,设置为false路由不会进行跳转

获取query方式的参数

import { ActivateRoute } from '@angular/router';
public id: any;
snapshot
constructor( public activeRoute: ActivateRoute ) { };
ngOnInit(){
this.id= this.activeRoute.snapshot.params['id'];
};
queryParams
ngOnInit(){
this.activeRoute.queryParams.subscribe(params => {
this.id = params['id'];
});

  

angular跳转和传参的更多相关文章

  1. JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参

    <script src="jquery.min.js" type="text/javascript"></script> <scr ...

  2. app之间的跳转和传参问题

    app 之间跳转和传参: 首先 创建2个app   formApp (需要跳转到另外app的项目)     toApp(被跳转的项目) 一:在toApp 项目中的操作: 1:创建URLSchemes ...

  3. 微信小程序开发:学习笔记[8]——页面跳转及传参

    微信小程序开发:学习笔记[8]——页面跳转及传参 页面跳转 一个小程序拥有多个页面,我们可以通过wx.navigateTo推入一个新的页面.在首页使用2次wx.navigateTo后,页面层级会有三层 ...

  4. spring mvc controller间跳转 重定向 传参(转)

    spring mvc controller间跳转 重定向 传参 url:http://zghbwjl.blog.163.com/blog/static/12033667220137795252845/ ...

  5. (day68)Vue-CLI项目、页面跳转和传参、生命周期钩子

    目录 一.Vue-CLI (一)环境搭建 (二)项目的创建 (三)项目目录结构 (四)Vue组件(.vue文件) (五)全局脚本文件main.js(项目入口) (六)Vue请求生命周期 二.页面跳转和 ...

  6. flutter页面间跳转和传参-Navigator的使用

    flutter页面间跳转和传参-Navigator的使用 概述 flutter中的默认导航分成两种,一种是命名的路由,一种是构建路由. 命名路由 这种路由需要一开始现在创建App的时候定义 new M ...

  7. html 跳转页面传参、点击获取DOM参数

    虽然现在前端框架已经很多,尤其是几大流行框架,比如Vue,React,Angular 等,已经去DOM化,但是还是有很多公司仍在使用 HTML + CSS + JS . 这里记载一下用到的HTML传参 ...

  8. JS完成页面跳转并传参的方法|附加:循环遍历对象

    此方法只能传递较少参数 方法如下: <a href='page/index.html'>跳转</a> 以上是正常写法,如果要传参按一下写法: <!--参数写在?后面,多个 ...

  9. js 页面之间的跳转、传参以及返回上一页

    js实现html 页面之间的跳转传参以及返回上一页的相关知识点 一.页面之间的跳转传参 1.在页面之间跳转的方式有两种: window.location.href="test.html?nu ...

随机推荐

  1. HDU2899Strange fuction(二分/三分)

    传送门 题目大意:求 F(x) = 6 * x^7+8*x^6+7*x^3+5*x^2-y*x (0 <= x <=100):的最小值 题解:求个导,二分导函数零点,就是原函数最小值所在的 ...

  2. numpy中多维数组的绝对索引

    这涉及到吧多维数组映射为一维数组. 对于3维数组,有公式: def MAP(x,y,z): return y_s * z_s * x + z_s * y + z 此公式可以推广到N维 测试代码:(两个 ...

  3. php 压缩字符串

    压缩字符串: base64_encode(gzcompress(serialize($data))) 解压字符串: unserialize(gzuncompress(base64_decode($se ...

  4. python做中学(二)bool()函数的用法

    定义: bool() 函数用于将给定参数转换为布尔类型,如果没有参数,返回 False. bool 是 int 的子类. 语法: 以下是 bool() 方法的语法: class bool([x] 参数 ...

  5. IT兄弟连 HTML5教程 HTML5的曲折发展过程 浏览器之间的大战

    播放电影和音乐要使用播放器,浏览网页就需要使用浏览器.浏览器虽然只是一个设备,并不是开发语言,但在Web开发中必不可少,因为浏览器要去解析HTML5.CSS3和JavaScript等语言用于显示网页, ...

  6. CentOS 7 firewalld详解,添加删除策略

    一.CentOS7中firewall防火墙 修改防火墙配置文件之前,需要对之前防火墙[/etc/firewalld/zones/public.xml]做好备份 重启防火墙后,需要确认防火墙状态和防火墙 ...

  7. 用redis-dump工具对redis集群所有数据进行导出导入

    安装redis-dump redis-dump是基于ruby开发,需要ruby环境,而且新版本的redis-dump要求2.2.2以上的ruby版本,centos中yum只能安装2.0版本的ruby. ...

  8. go-gtk环境配置

    go-gtk环境配置(用于go的图形化界面) 弄了一天,终于把这个环境给搭建好了,差不多就是安装msys2->安装gtk的各个版本->安装mingw(我原来装有但不影响,因为重复了,环境变 ...

  9. python基础(32):进程(二)

    1. multiprocess模块 仔细说来,multiprocess不是一个模块而是python中一个操作.管理进程的包. 之所以叫multi是取自multiple的多功能的意思,在这个包中几乎包含 ...

  10. PHP语法入门以及变量

    1PHP语法入门 1.1PHP是编译型语言      编译语言和解释语言的区别在于是否保存最终的可执行程序. 1.2PHP定界符       因为PHP是脚本语言,所以需要定界符 <?php e ...