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 ...
随机推荐
- LG1131 「ZJOI2007」时态同步 树形DP
问题描述 LG1131 题解 正难则反,把从一个点出发到叶子结点看做从叶子结点走到那个点. DP方程很显然. \(\mathrm{Code}\) #include<bits/stdc++.h&g ...
- 【python爬虫】cookie & session
一.什么是cookie? cookie是指网站为了鉴别用户身份,进行会话跟踪而存储在客户端本地的数据. 二.什么是session? 本来的含义是指有始有终的一些列动作,而在web中,session对象 ...
- TensorFlow中实现RNN,彻底弄懂time_step
这篇博客不是一篇讲解原理的博客,这篇博客主要讲解tnesorlfow的RNN代码结构,通过代码来学习RNN,以及讲解time_steps,如果这篇博客没有让你明白time_steps,欢迎博客下面评论 ...
- 暑期班--JAVA无敌课程---第一天-Day01-----Java基础
1.Java发展历史 1.1Games Golsing Java创始人 2.What is JDK 3.记本本开发第一个Java程序 巴拉巴拉 巴拉巴拉 巴拉巴拉 巴拉巴拉 巴拉巴拉 巴拉巴拉 巴拉巴 ...
- Python自动群发邮件,只需20行代码!
今日分享 Python自动群发邮件 import smtplib from email import (header) from email.mime import (text, applicatio ...
- 如何使用numpy实现一个全连接神经网络?(上)
全连接神经网络的概念我就不介绍了,对这个不是很了解的朋友,可以移步其他博主的关于神经网络的文章,这里只介绍我使用基本工具实现全连接神经网络的方法. 所用工具: numpy == 1.16.4 matp ...
- Docker容器 MySQL中文乱码解决方案
docker exec进入容器 sudo docker exec -it 588340b778f6 bash 执行以下命令,将 character-set-server=utf8 写入mysql配置文 ...
- IDEA maven设置配置
IDEA Maven配置 1. 下载maven 下载地址 从官网上,下载一个压缩包,然后解压到任意的文件夹 Maven的安装必须需要jdk1.7+ 2. 环境变量设置 M2_HOME改为具体的路径,其 ...
- java基础(16):正则表达式、Date、DateFormat、Calendar
1. 正则表达式 1.1 正则表达式的概念 正则表达式(英语:Regular Expression,在代码中常简写为regex). 正则表达式是一个字符串,使用单个字符串来描述.用来定义匹配规则,匹配 ...
- Java日期时间API系列7-----Jdk8中java.time包中的新的日期时间API类的特点
1.不变性 新的日期/时间API中,所有的类都是不可变的,这对多线程环境有好处. 比如:LocalDateTime 2.关注点分离 新的API将人可读的日期时间和机器时间(unix timestamp ...