浅谈angular4.0中路由传递参数、获取参数最nice的写法

研究ng4的官网，终于找到了我想要的方法。我想要的结果是用‘&'拼接参数传送，这样阅读上是最好的。

否则很多‘/'的拼接，容易混淆参数和组件名称。

一般我们页面跳转传递参数都是这样的格式：

http://angular.io/api?uid=1&username=moon

但是在SPA单页应用中却是下面的结果居多【初级视频都是这样敷衍的】

http://angular.io/api/1/moon

那么怎么实现我说的结果呢？

重点开始了。

实现从product页面跳转到product-detail页面。

step1：在app-routing.module.ts中配置路由。

const routes: Routes = [
{
 path: 'product',
 component: ProductComponent,
 },
 {
 path: 'product-detail',
 component: ProductDetailComponent,
 }
];

step2：在product.ts中书写跳转，并传参数。

constructor(
 private router: Router, //这里需要注入Router模块
){}
jumpHandle(){
 //这是在html中绑定的click跳转事件
 this.router.navigate(['product-detail'], {
 queryParams: {
  productId: '1',
  title: 'moon'
 }
 });
}

step3：在product-detail.ts中获取传递过来的参数productId、title

constructor(
 private activatedRoute: ActivatedRoute, //这里需要注入ActivatedRoute模块
) {
 activatedRoute.queryParams.subscribe(queryParams => {
 let productId = queryParams.productId;
 let title = queryParams.title;
 });
}

ok，就这样完美的解决了。

以上这篇浅谈angular4.0中路由传递参数、获取参数最nice的写法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • AngularJS入门教程二：在路由中传递参数的方法分析

    本文实例讲述了AngularJS在路由中传递参数的方法.分享给大家供大家参考,具体如下: 我们不仅可以在控制器中直接定义属性的值,比如: app.controller('listController',function($scope){ $scope.name="ROSE"; }); AngularJS还提供了传递参数的功能,目前我接触到的一种方式是从视图中传参: <!--首页html--> <li><a href="#/user/18"

  • 浅谈Angular路由守卫

    浅谈Angular路由守卫

    引言 在企业应用中权限.复杂页多路由数据处理.进入与离开路由数据处理这些是非常常见的需求. 当希望用户离开一个正常编辑页时,要中断并提醒用户是否真的要离开时,如果在Angular中应该怎么做呢? 其实Angular路由守卫属性可以帮我们做更多有意义的事,而且非常简单. 什么是路由守卫? Angular 的 Route 路由参数中除了熟悉的 path.component 外,还包括四种是否允许路由激活与离开的属性. canActivate 控制是否允许进入路由. canActivateChild

  • 浅谈angular4.0中路由传递参数、获取参数最nice的写法

    研究ng4的官网,终于找到了我想要的方法.我想要的结果是用'&'拼接参数传送,这样阅读上是最好的. 否则很多'/'的拼接,容易混淆参数和组件名称. 一般我们页面跳转传递参数都是这样的格式: http://angular.io/api?uid=1&username=moon 但是在SPA单页应用中却是下面的结果居多[初级视频都是这样敷衍的] http://angular.io/api/1/moon 那么怎么实现我说的结果呢? 重点开始了. 实现从product页面跳转到product-det

  • 浅谈Vue2.0中v-for迭代语法的变化(key、index)

    今天,在写关于Vue2.0的代码中发现 $key这个值并不能渲染成功,问题如下: 结果这个对象的key值并不能够显示: 后来查阅了文档才知道,这是因为在Vue2.0中,v-for迭代语法已经发生了变化: 丢弃了: 新数组语法 value in arr (value, index) in arr 新对象语法 value in obj (value, key) in obj (value, key, index) in obj 解决后: 以上这篇浅谈Vue2.0中v-for迭代语法的变化(key.i

  • 浅谈angular4 ng-content 中隐藏的内容

    如果你尝试在 Angular 中编写可重复使用的组件,则可能会接触到内容投射的概念.然后你发现了 <ng-content> ,并找到了一些关于它的文章,进而实现了所需的功能. 接下来我们来通过一个简单的示例,一步步介绍 <ng-content> 所涉及的内容. Simple example 在本文中我们使用一个示例,来演示不同的方式实现内容投影.由于许多问题与Angular 中的组件生命周期相关,因此我们的主要组件将显示一个计数器,用于展示它已被实例化的次数: import { C

  • 浅谈function(函数)中的动态参数

    我们可向函数传递动态参数,*args,**kwargs,首先我们来看*args,示例如下: 1.show(*args) def show(*args): print(args,type(args)) #以元组的形式向列表传递参数 show(11,22,33,44,55,66) 首先我们定义了一个函数,函数show(*args)里面的*args可以接收动态参数,这里我们接收一个元组形式的参数,我们可以向show()里面传递很多参数,函数默认把这些参数作为一个元组进行接收. 2.show(**arg

  • 浅谈从Java中的栈和堆,进而衍生到值传递

    简述Java中的栈和堆,变量和对象的地址存放和绑定机制 初学java的小白,很多人都搞不清楚java中堆和栈的概念,我们都知道计算机只能识别二进制字节码文件,如果分不清楚对象和变量在内存的地址分配,也就是堆和栈的问题,很多问题比如绑定机制.静态方法.实例方法.局部变量的作用域就会搞不清楚. 首先记住结论: 基本数据类型.局部变量.String类型的直接赋值都是存放在栈内存中的,用完就消失. new创建的实例化对象.String类型的构造方法new出来的对象及数组,是存放在堆内存中的,用完之后靠垃

  • Spring Boot/VUE中路由传递参数的实现代码

    在路由时传递参数,一般有两种形式,一种是拼接在url地址中,另一种是查询参数.如:http://localhost:8080/router/tang/101?type=spor&num=12.下面根据代码看一下,VUE 和 Spring Boot 中各自是如何处理传递和接受参数的. Spring Boot package com.tang.demo1.controller; import org.springframework.web.bind.annotation.*; @RestContro

  • 浅谈django2.0 ForeignKey参数的变化

    Django2.0中编写models类下的ForeignKey book = models.ForeignKey('BookInfo') django2.0与之前的1.8不同, 错误: book = models.ForeignKey('BookInfo') ypeError: __init__() missing 1 required positional argument: 'on_delete' 解决方法: book = models.ForeignKey('BookInfo', on_d

  • 浅谈ThinkPHP5.0版本和ThinkPHP3.2版本的区别

    5.0版本和之前版本的差异较大,本篇对熟悉3.2版本的用户给出了一些5.0的主要区别. URL和路由 5.0的URL访问不再支持普通URL模式,路由也不支持正则路由定义,而是全部改为规则路由配合变量规则(正则定义)的方式: 主要改进如下: 增加路由变量规则: 增加组合变量支持: 增加资源路由: 增加路由分组: 增加闭包定义支持: 增加MISS路由定义: 支持URL路由规则反解析: 请求对象和响应对象 5.0新增了请求对象Request和响应对象Response,Request统一处理请求和获取请

  • 浅谈C/C++中指针和数组的不同

    这边先简单介绍一下内存分区. 内存按照用途划分为五个区: 1.栈区:由系统控制分配和回收. 例如定义变量 int x = 0; int *p = NULL; 变量所占的内存都是分配在栈区的. 2.堆区:由程序员管理. 在C语言中由 malloc 申请的内存,或者在C++中,用 new 申请的内存,是在堆区中申请的.用完之后需要程序员自己回收,否则会造成内存泄漏. 3.全局区:存储全局变量及静态变量 4.常量区:存储常量. 5.代码区:存储编译之后的二进制代码. 数组和指针具有很大的相似性,实际上

  • 浅谈Django前端后端值传递问题

    前端后端传值问题总结 前端传给后端 通过表单传值 1.通过表单get请求传值 在前端当通过get的方式传值时,表单中的标签的name值将会被当做action的地址的参数 此时,在后端可以通过get请求相应的name值拿到对应的value值 例子: html中: <form action="{% url 'backweb:select_art' %}" method="post"> {% csrf_token %} <section class=&q

随机推荐