使用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. LeetCode 1244. 力扣排行榜

    地址 https://www.acwing.com/solution/LeetCode/content/5765/ 题目描述新一轮的「力扣杯」编程大赛即将启动,为了动态显示参赛者的得分数据,需要设计一 ...

  2. ios App 开发指南

    开发者账号申请 http://www.applicationloader.net/blog/zh/547.html https://zhuanlan.zhihu.com/p/66118041 http ...

  3. 开发工具IntelliJ IDEA

    开发工具概述 IDEA是一个专门针对Java的集成开发工具(IDE),由Java语言编写.所以,需要有JRE运行环境并配置好环境变量.它可以极大地提升我们的开发效率.可以自动编译,检查错误.在公司中, ...

  4. 2. 词法"陷阱"

    1. 练习2-1 某些编译器允许嵌套注释.请写一个程序测试,要求:无论是对允许嵌套注释的编译器,还是对不允许嵌套注释的编译器,该程序都能正常通过编译,但是这两者情况下执行的结果却不相同. #inclu ...

  5. 更新GitHub项目出现There is no tracking information for the current branch. Please specify which branch you want to merge with. 怎么解决

    git pull命令用于从另一个存储库或本地分支获取并集成(整合).git pull命令的作用是:取回远程主机某个分支的更新,再与本地的指定分支合并,它的完整格式稍稍有点复杂. 如果当前分支只有一个追 ...

  6. 基于socketserver实现并发的socket编程

    目录 一.基于TCP协议 1.1 server类 1.2 request类 1.3 继承关系 1.4 服务端 1.5 客户端 1.6 客户端1 二.基于UDP协议 2.1 服务端 2.2 客户端 2. ...

  7. SQL语句--查找数据select

    查看全部数据库表参照地址:https://www.cnblogs.com/zhoulixiangblog/p/12078724.html 本文所用数据库表: prod_id vend_id prod_ ...

  8. Sublime和VSCode生成基础HTML代码

    我们在编写前端页面时,常希望能自动生成基础的HTML代码.而在Sublime和VSCode就有这样的功能 在Sublime中,在编辑栏输入html,然后敲Tab键,则自动生成代码如下: <!DO ...

  9. pytest框架与unittest框架的对比

    一.pytest的优势 pytest是基于unittest之上的单元测试框架,它的优势如下: 自动发现测试模块和测试方法 断言使用 assert + 表达式 可以设置测试会话级(session).模块 ...

  10. Elastic:使用Heartbeat进行Uptime监控

    Elastic:使用Heartbeat进行Uptime监控 Elastic在6.5的版本中推出Heartbeat.Heartbeat 也就是我们通常所说的心跳.我们知道在医院,医生是用听心跳来判断一个 ...