使用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. 题解:SPOJ1026 Favorite Dice

    原题链接 题目大意 给你一个n个面的骰子,每个面朝上的几率相等,问每个面都被甩到的期望次数 题解 典型的赠券收集问题. 我们考虑当你手上已有\(i\)种不同的数,从集合中任选一个数得到新数的概率,为\ ...

  2. Leetcode 1239. 串联字符串的最大长度

    地址 https://leetcode-cn.com/problems/maximum-length-of-a-concatenated-string-with-unique-characters/s ...

  3. 一个python问题引发的思考

    问题: pyqt5下开发的时候,遇到了一个这样的问题.Traceback (most recent call last):File “test.py”, line 3, in from PyQt5.Q ...

  4. Android常用adb命令总结(二)

    adb shell 命令 简单点讲,adb 命令是 adb 这个程序自带的一些命令,而 adb shell 则是调用的 Android 系统中的命令,这些 Android 特有的命令都放在了 Andr ...

  5. MySQL基础之Natural Join用法

    Natural join即自然连接,natural join等同于inner join或inner using,其作用是将两个表中具有相同名称的列进行匹配 用https://www.w3resourc ...

  6. jQuery 源码分析(十三) 数据操作模块 DOM属性 详解

    jQuery的属性操作模块总共有4个部分,本篇说一下第2个部分:DOM属性部分,用于修改DOM元素的属性的(属性和特性是不一样的,一般将property翻译为属性,attribute翻译为特性) DO ...

  7. swoole的process模块创建和使用子进程

    swoole中为我们提供了一个进程管理模块 Process,替换PHP的 pcntl 扩展,方便我们创建进程,管理进程,和进程间的通信. swoole提供了2种进程间的通信: 1.基于 unix so ...

  8. Web前端——css

    css 推荐的样式编写顺序: Positioning:定位 Box model:盒子模型.大小等 Typographic:文字系列.排印等 Visual:可视化.背景等 Misc:其它混杂模式 居中 ...

  9. 练手WPF(二)——2048游戏的简易实现(上)

    1.创建游戏界面编辑MainWindow.xaml,修改代码如下: <Window.Resources> <Style TargetType="Label"> ...

  10. File 删除给定的文件或目录

    package seday03; import java.io.File; /*** 创建一个多级目录* @author xingsir*/public class MkDirsDemo { publ ...