angular跳转和传参
使用routerLink跳转
- <a routerLink=["/exampledetail",id]></a>
- <a routerLink=["/exampledetail",{queryParams:object}] ></a>
使用navigate跳转
import { Router } from '@angular/router';
- this.router.navigate(['user', 1]);
以根路由为起点跳转 - this.router.navigate(['user', 1],{relativeTo: route});
默认值为根路由,设置后相对当前路由跳转,route是ActivatedRoute的实例,使用需要导入ActivatedRoute - this.router.navigate(['user', 1],{ queryParams: { id: 1 } });
路由中传参数 /user/1?id=1 - this.router.navigate(['view', 1], { preserveQueryParams: true });
默认值为false,设为true,保留之前路由中的查询参数/user?id=1 to /view?id=1 - this.router.navigate(['user', 1],{ fragment: 'top' });
路由中锚点跳转 /user/1#top - this.router.navigate(['/view'], { preserveFragment: true });
默认值为false,设为true,保留之前路由中的锚点/user/1#top to /view#top - this.router.navigate(['/user',1], { skipLocationChange: true });
默认值为false,设为true路由跳转时浏览器中的url会保持不变,但是传入的参数依然有效 - 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跳转和传参的更多相关文章
- JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
<script src="jquery.min.js" type="text/javascript"></script> <scr ...
- app之间的跳转和传参问题
app 之间跳转和传参: 首先 创建2个app formApp (需要跳转到另外app的项目) toApp(被跳转的项目) 一:在toApp 项目中的操作: 1:创建URLSchemes ...
- 微信小程序开发:学习笔记[8]——页面跳转及传参
微信小程序开发:学习笔记[8]——页面跳转及传参 页面跳转 一个小程序拥有多个页面,我们可以通过wx.navigateTo推入一个新的页面.在首页使用2次wx.navigateTo后,页面层级会有三层 ...
- spring mvc controller间跳转 重定向 传参(转)
spring mvc controller间跳转 重定向 传参 url:http://zghbwjl.blog.163.com/blog/static/12033667220137795252845/ ...
- (day68)Vue-CLI项目、页面跳转和传参、生命周期钩子
目录 一.Vue-CLI (一)环境搭建 (二)项目的创建 (三)项目目录结构 (四)Vue组件(.vue文件) (五)全局脚本文件main.js(项目入口) (六)Vue请求生命周期 二.页面跳转和 ...
- flutter页面间跳转和传参-Navigator的使用
flutter页面间跳转和传参-Navigator的使用 概述 flutter中的默认导航分成两种,一种是命名的路由,一种是构建路由. 命名路由 这种路由需要一开始现在创建App的时候定义 new M ...
- html 跳转页面传参、点击获取DOM参数
虽然现在前端框架已经很多,尤其是几大流行框架,比如Vue,React,Angular 等,已经去DOM化,但是还是有很多公司仍在使用 HTML + CSS + JS . 这里记载一下用到的HTML传参 ...
- JS完成页面跳转并传参的方法|附加:循环遍历对象
此方法只能传递较少参数 方法如下: <a href='page/index.html'>跳转</a> 以上是正常写法,如果要传参按一下写法: <!--参数写在?后面,多个 ...
- js 页面之间的跳转、传参以及返回上一页
js实现html 页面之间的跳转传参以及返回上一页的相关知识点 一.页面之间的跳转传参 1.在页面之间跳转的方式有两种: window.location.href="test.html?nu ...
随机推荐
- 机器学习--用PCA算法实现三维样本降到二维
对于维数比较多的数据,首先需要做的事就是在尽量保证数据本质的前提下将数据中的维数降低.降维是一种数据集预处理技术,往往在数据应用在其他算法之前使用,它可以去除掉数据的一些冗余信息和噪声,使数据变得更加 ...
- Scrum会议(第十一周)
十一周会议 1.任务分配: github相关代码 2.会议记录: 总结并阐述了自己在上周存在的问题以及解决了自己把自己的issue发在了自己的github,并没有把问题发在我们项目小组的项目的issu ...
- hebust-fengyu
三人行必有我师焉,择其善者而从之,其不善者而改之. 入则无法家拂士,出则无敌国外患者,国恒亡,然后知生于忧患而死于安乐也. 狡兔死走狗烹,飞鸟尽良弓藏,敌国尽谋臣亡 今齐地方千里,百二十城,宫妇左右莫 ...
- python调用C++ DLL 传参技巧
结构体传参:http://www.jb51.net/article/52513.htm 准备工作: C++文件(cpp):(注意在函数声明上加上extern "C" 的修饰) #i ...
- 部署Springboot项目到Linux云服务器
前言 环境:IDEA.Springboot.Maven(自己电脑安装的Maven) 一.打包jar包 检查自己的pom.xml文件下面有无Maven的依赖插件,即有无如下: <build> ...
- 我用python训练了一个拳皇模型,从此在各地游戏厅再也没输过!
从世界瞩目的围棋游戏 AlphaGo 突然袭来的回忆杀~ 今天为大家介绍一个在街机游戏<街头霸王 3>中进行模拟来训练改进强化学习算法的工具包.不仅在 MAME 游戏模拟器 ...
- C语言--计算程序执行时间
C语言–计算程序执行时间1. gettimeofday精度1us #include<stdio.h>#include<sys/time.h> int main(){ /* 定义 ...
- WPF属性绑定实现双向变化
WPF依赖项属性可以实现属性的绑定,成功绑定之后只要修改后台绑定的属性,即可UI同步自动更新绑定的值,无需手动刷新界面:同样,前台的值变化后,通过获取绑定的属性值也可获取UI变化后的值,实现双向变化的 ...
- Python笔记:设计模式之代理模式
代理通常就是一个介于寻求方和提供方之间的中介系统.其核心思想就是客户端(寻求方)没有直接和提供方(真实对象)打交道,而是通过代理对象来完成提供方提供的资源或操作. 代理其实就是封装实际服务对象的包装器 ...
- git 多账户链接不同gitlab仓库
1.若之前对 git 设置过全局的 user.name 和 user.email.类似(用git config --global --list 进行查看你是否设置) 一定要清除之前设置的用户和邮箱 $ ...