使用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. LG1131 「ZJOI2007」时态同步 树形DP

    问题描述 LG1131 题解 正难则反,把从一个点出发到叶子结点看做从叶子结点走到那个点. DP方程很显然. \(\mathrm{Code}\) #include<bits/stdc++.h&g ...

  2. 【python爬虫】cookie & session

    一.什么是cookie? cookie是指网站为了鉴别用户身份,进行会话跟踪而存储在客户端本地的数据. 二.什么是session? 本来的含义是指有始有终的一些列动作,而在web中,session对象 ...

  3. TensorFlow中实现RNN,彻底弄懂time_step

    这篇博客不是一篇讲解原理的博客,这篇博客主要讲解tnesorlfow的RNN代码结构,通过代码来学习RNN,以及讲解time_steps,如果这篇博客没有让你明白time_steps,欢迎博客下面评论 ...

  4. 暑期班--JAVA无敌课程---第一天-Day01-----Java基础

    1.Java发展历史 1.1Games Golsing Java创始人 2.What is JDK 3.记本本开发第一个Java程序 巴拉巴拉 巴拉巴拉 巴拉巴拉 巴拉巴拉 巴拉巴拉 巴拉巴拉 巴拉巴 ...

  5. Python自动群发邮件,只需20行代码!

    今日分享 Python自动群发邮件 import smtplib from email import (header) from email.mime import (text, applicatio ...

  6. 如何使用numpy实现一个全连接神经网络?(上)

    全连接神经网络的概念我就不介绍了,对这个不是很了解的朋友,可以移步其他博主的关于神经网络的文章,这里只介绍我使用基本工具实现全连接神经网络的方法. 所用工具: numpy == 1.16.4 matp ...

  7. Docker容器 MySQL中文乱码解决方案

    docker exec进入容器 sudo docker exec -it 588340b778f6 bash 执行以下命令,将 character-set-server=utf8 写入mysql配置文 ...

  8. IDEA maven设置配置

    IDEA Maven配置 1. 下载maven 下载地址 从官网上,下载一个压缩包,然后解压到任意的文件夹 Maven的安装必须需要jdk1.7+ 2. 环境变量设置 M2_HOME改为具体的路径,其 ...

  9. java基础(16):正则表达式、Date、DateFormat、Calendar

    1. 正则表达式 1.1 正则表达式的概念 正则表达式(英语:Regular Expression,在代码中常简写为regex). 正则表达式是一个字符串,使用单个字符串来描述.用来定义匹配规则,匹配 ...

  10. Java日期时间API系列7-----Jdk8中java.time包中的新的日期时间API类的特点

    1.不变性 新的日期/时间API中,所有的类都是不可变的,这对多线程环境有好处. 比如:LocalDateTime 2.关注点分离 新的API将人可读的日期时间和机器时间(unix timestamp ...