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 ...
随机推荐
- 从傅里叶变换(FFT)到数论变换(NTT)
FFT可以用来计算多项式乘法,但是复数的运算中含有大量的浮点数,精度较低.对于只有整数参与运算的多项式,有时,\(\text{NTT(Number-Theoretic Transform)}\)会是更 ...
- mybatis foreach方法遍历对象
<delete id="deleteAppUserByIds"> delete from app_userinfo where <foreach i ...
- 微信小程序图像增强img.superresolution接口
整体流程: 获得access_token 调用img.superresolution得到media_id 根据media_id下载图片 注:虽然以下的几个接口都是服务端API,但是我都是在客户端调用的 ...
- CF1248F Catowice City
题目链接 problem 有\(n\)个人,每个人家有一只猫.每个人都认识一些猫(其中肯定包括自己家的猫).选出\(j\)个人和\(k\)只猫\((j,k\ge 1)\).使得\(j+k=n\)且选出 ...
- matlab练习程序(螺线拟合)
这里待拟合的螺线我们选择阿基米德螺线,对数螺线类似. 螺线的笛卡尔坐标系方程为: 螺线从笛卡尔坐标转为极坐标方程为: 阿基米德螺线在极坐标系下极径r和极角theta为线性关系,方程为: 计 ...
- Update 19.11 for Azure Sphere
今天,微软发布了面向Azure Sphere的19.11更新,其主要亮点就是加入了对开发工具Visual Studio Code和Linux开发环境的支持.具体来讲,本次更新包含3个部分: 1. Az ...
- app自动化测试初体验
一.appium环境开启 1.开启MUMU模拟器/真机(真机需要开启“USB开发调试模式”),使用命令行adb devices检查设备是否正常连接 2.开启appium 双击运行appium应用 正常 ...
- Spring5源码解析2-register方法注册配置类
接上回已经讲完了this()方法,现在来看register(annotatedClasses);方法. // new AnnotationConfigApplicationContext(AppCon ...
- 记一次hosts配置内容过多引起的故障
问题环境 系统环境 CentOS release 6.9 (Final) 2.6.32-696.16.1.el6.x86_64 Java 环境 1.8.0_151 Apollo 1.4.0 代码框架 ...
- 简析 Golang IO 包
简析 Golang IO 包 io 包提供了 I/O 原语(primitives)的基本接口.io 包中定义了四个最基本接口 Reader.Writer.Closer.Seeker 用于表示二进制流的 ...