使用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. Idea为类生成序列号(十一)

    新建一个测试的实体类Gradle,实现java.io.Serializable接口,选择类名,按Alt+Enter键,出现的提示框中没有生成serialVersionUID的提示,这个需要设置之后才会 ...

  2. LG3825/BZOJ4945/LOJ2305 「NOI2017」游戏 dfs+2-SAT

    问题描述 LG3825 BZOJ4945 LOJ2305 题解 发现对于每个地图,如果没有\(A,B,C\)地图不可以使用\(a,b,c\),就是一个\(\mathrm{3-SAT}\)问题. 有了这 ...

  3. 第三章 HTTP报文中的HTTP信息

    第三章 HTTP报文中的HTTP信息 HTTP通信过程:客户端—>服务端,服务端—>客户端. 1.HTTP报文 使用HTTP协议交互的信息被称为HTTP报文,包括请求报文和响应报文. [请 ...

  4. 无限可能,Elasticsearch(一)

    这个世界已然被数据淹没.多年来,我们系统间流转和产生的大量数据已让我们不知所措. 现有的技术都集中在如何解决数据仓库存储以及如何结构化这些数据. 这些看上去都挺美好,直到你实际需要基于这些数据实时做决 ...

  5. 从零开始的微信小程序入门教程(一)

    之前说要和同事一起开发个微信小程序项目,现在也在界面设计,功能定位等需求上开始实施了.所以在还未正式写项目前,打算在空闲时间学习下小程序.本意是在学习过程中结合实践整理出一个较为入门且不是很厚的教程, ...

  6. 01-String(键命令)

    Redis Redis是一个高性能的Key-Value数据库. 学习目标 能够描述出什么是 nosql 能够说出 Redis 的特点 能够根据参考资料修改常用Redis配置 能够写出Redis中str ...

  7. 记一次收集APP native崩溃信息

    最近在学习 极客时间Android开发高手课 老师推荐了Breakpad开源库来采集native 的crash1.为什么要使用Google Breakpad? 我们在开发过程中,Android JNI ...

  8. 数据库——SQL-SERVER CREATE-TABLES

    给出数据库实验所需要的“CREATE-TABLES.SQL”文件 use master go if exists (select * from dbo.sysdatabases where name ...

  9. jvm 性能调优工具之 jstat

    概述 Jstat是JDK自带的一个轻量级小工具.全称“Java Virtual Machine statistics monitoring tool”,它位于java的bin目录下,主要利用JVM内建 ...

  10. MVC过滤器:自定义异常过滤器使用案例

    在上一篇文章中讲解了自定义异常过滤器,这篇文章会结合工作中的真实案例讲解一下如何使用自定义异常过滤器. 一.需求 本案例要实现的功能需求:在发生异常时记录日志,日志内容包括发生异常的Controlle ...