有3种方式

1、在查询参数中传递数据

2、在路由路径中传递数据

定义路由路径时就要指定参数名字,在实际路径中携带参数。

3、在路由配置中传递数据

一、在查询参数中传递数据

第一步:修改模版中商品详情链接,带一个指令queryParams

<a [routerLink]="['/product']" [queryParams]="{id:1}">商品详情</a>

效果:点击链接会传一个商品id为1的参数过去。

第二步:在商品详情组件中接收参数

用ActivatedRoute接收id并赋值给productId显示在模版中。

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router'; @Component({
selector: 'app-product',
templateUrl: './product.component.html',
styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit { private productId: number;
constructor(private routeInfo: ActivatedRoute) { } ngOnInit() {
this.productId = this.routeInfo.snapshot.queryParams["id"];
} }

修改模版显示

<p>
这里是商品信息组件
</p>
<p>
商品id是{{productId}}
</p>

二、 在路由路径中传递数据

第一步:修改路由path属性使其可以携带数据

{ path: 'product/:id', component: ProductComponent },

第二步:修改路由链接的参数来传递数据

传一个2过去。

<a [routerLink]="['/product',2]">商品详情</a>

效果:

第三步,商品详情信息组件,从url中取id

this.productId = this.routeInfo.snapshot.params["id"];

三、参数快照和参数订阅

1、参数快照问题

参数快照就是从snapshot中获取参数。

this.productId = this.routeInfo.snapshot.params["id"];

修改:

商品详情按钮的响应函数,传递一个3过去。

toProductDetails(){
this.router.navigate(['/product',3]);
}

问题:

先点主页,再点商品详情链接正确跳转到商品详情组件,再点商品详情按钮,问题来来,url中id变为来3,内容显示中id没有变还是2。

原因:

从home组件路由到component组件,商品详情组件会被创建,它的constructor(),ngOnInit()会被调用一次。

但是从商品详情组件直接路由到商品详情,由于商品详情组件在点击商品详情按钮时已经被创建了,它不会再次被创建,ngOnInit()方法不会再次被创建。所以productId依然保存着第一次被创建时候的值。

解决办法:参数订阅。

2、参数订阅

rxjs的subscribe方法。

  ngOnInit() {
this.routeInfo.params.subscribe((params: Params)=> this.productId=params["id"]);
}

问题得以解决。

获取路由参数时候:

确定一个组件不会从自身路由到自身,可以通过参数快照方式获取参数。

不确定,则用参数订阅方式获取。

本文作者starof,因知识本身在变化,作者也在不断学习成长,文章内容也不定时更新,为避免误导读者,方便追根溯源,请诸位转载注明出处:http://www.cnblogs.com/starof/p/9006185.html 有问题欢迎与我讨论,共同进步。

Angular路由——在路由时候传递数据的更多相关文章

  1. angular input标签只能单向传递数据的问题

    angularjs input标签只能单向传递数据的问题 <ion-view title = "{{roomName}}" style = "height:90%; ...

  2. Vue Router路由守卫妙用:异步获取数据成功后再进行路由跳转并传递数据,失败则不进行跳转

    问题引入 试想这样一个业务场景: 在用户输入数据,点击提交按钮后,这时发起了ajax请求,如果请求成功, 则跳转到详情页面并展示详情数据,失败则不跳转到详情页面,只是在当前页面给出错误消息. 难点所在 ...

  3. Angular 4 路由时传递数据

    路由时传递数据的方式有 1. 在查询参数中传递数据 2. 在路由路径中传递参数 3. 在路由配置中传递参数 一.在查询参数中传递数据 在前一节的基础上,我们增加路由数据传递 2. 接收参数的地方 3. ...

  4. vue_VueRouter 路由_路由器管理n个路由_并向路由组件传递数据_新标签路由_编程式路由导航

    路由:就是一个 key 与 value 的映射关系.key 就是 pathh 前台路由的 value 是 Component 组件对象 后台路由的 value 是一个 回调函数 普通链接: 会发送请求 ...

  5. react之传递数据的几种方式props传值、路由传值、状态提升、redux、context

    react之传递数据的几种方式 1.父子传值 父传值:<子的标签 value={'aaa'} index={'bbb'}></子的标签> 子接值:<li key={thi ...

  6. Vue总结第五天:vue-router (使用模块化(创建Vue组件)机制编程)、router-link 标签的属性、路由代码跳转、懒加载、路由嵌套(子路由)、路由传递数据、导航守卫)

    Vue总结第五天:vue-router ✿ 路由(器)目录: □  vue中路由作用 □  vue-router基本使用 □  vue-router嵌套路由 □  vue-router参数传递 □  ...

  7. angular.js的路由和模板在asp.net mvc 中的使用

    angular.js的路由和模板在asp.net mvc 中的使用 我们知道angular.js是基于mvc 的一款优秀js框架,它也有一套自己的路由机制,和asp.net mvc 路由不太一样.as ...

  8. Angular学习笔记—路由(转载)

    创建路由 1.首先安装 Angular Router.你可以通过运行以下任一操作来执行此操作: yarn add @angular/router # OR npm i --save @angular/ ...

  9. angular 4 router传递数据三种方法

    1.在查询参数中传递数据 <a  [routerLink]="['/product']" [queryParams]="{id:1,name:'dongian'}& ...

随机推荐

  1. 初步了解Bootstrap4

    Bootstrap 是全球最受欢迎的前端组件库,用于开发响应式布局.移动设备优先的 WEB 项目. Bootstrap4 目前是 Bootstrap 的最新版本,是一套用于 HTML.CSS 和 JS ...

  2. Vivado寄存器初始值问题

    前言 本复位只针对Vivado中的寄存器复位. 什么时候需要复位?到底要不要复位?怎么复位?复位有什么卵用? 该复位的寄存器需要复位,复位使得寄存器恢复初始值,有的寄存器并不需要复位(数据流路径上). ...

  3. 【LOJ2586】【APIO2018】选圆圈 CDQ分治 扫描线 平衡树

    题目描述 在平面上,有 \(n\) 个圆,记为 \(c_1,c_2,\ldots,c_n\) .我们尝试对这些圆运行这个算法: 找到这些圆中半径最大的.如果有多个半径最大的圆,选择编号最小的.记为 \ ...

  4. Java【初识篇】语言概述

    什么是计算机语言 语言:是人与人之间用于沟通的一种方式.例如:中国人与中国人用普通话沟通.而中国人要和英国人交流,就要学习英语.计算机语言(编程语言):人与计算机交流的方式.如果人要与计算机交流,那么 ...

  5. Linux硬盘性能测试工具 - FIO

    1.安装:方法一:直接用指令yum -y install fio方法二:如果方法一不可行则,在官网http://freshmeat.net/projects/fio/下载fio的安装包.安装方法很简单 ...

  6. 【HDU4751】Divide Groups

    题目大意:给定 N 个点和一些有向边,求是否能够将这个有向图的点分成两个集合,使得同一个集合内的任意两个点都有双向边联通. 题解:反向思考,对于没有双向边的两个点一定不能在同一个集合中.因此,构建一个 ...

  7. 2018年秋季学期《c语言程序设计》编程总结

    <c语言程序设计>第四周编程总结 <c语言程序设计>第五周编程总结 <c语言程序设计>第六周编程总结 <c语言程序设计>第七周编程总结 <c语言程 ...

  8. wiki中文语料的word2vec模型构建

    一.利用wiki中文语料进行word2vec模型构建 1)数据获取 到wiki官网下载中文语料,下载完成后会得到命名为zhwiki-latest-pages-articles.xml.bz2的文件,里 ...

  9. Pandas系列(八)-筛选工具介绍

    内容目录 1. 字典式 get 访问 2. 属性访问 3. 切片操作 4. 通过数字筛选行和列 5. 通过名称筛选行和列 6. 布尔索引 7. isin 筛选 8. 通过Callable筛选 数据准备 ...

  10. GO语言系列(五)- 结构体和接口

    结构体(Struct) Go中struct的特点 1. 用来自定义复杂数据结构 2. struct里面可以包含多个字段(属性) 3. struct类型可以定义方法,注意和函数的区分 4. struct ...