详解Angular5路由传值方式及其相关问题

目前Angular已经升级到了稳定版本Angular5,这次升级更小更快以及更稳定!路由可以说是Angular甚至是单页应用的核心部分了吧!在angularjs中的路由最大的缺点就是无法嵌套路由,在Angular中解决了这个问题!在Angular中路由不仅仅是页面跳转,其中还有一项叫英雄列表跳转英雄详情!在诸多的列表,不可能给每个英雄做一个详情页,于是乎路由参数起到作用了!通过路由传入参数识别那个英雄的详情!

现在对于路由传值进行详解,首先一种方式是官网的导航到详情的单值id传入,另一种是多数据传入!

1.单值传入

['/hero', hero.id]

 <ul class="items">
  <li *ngFor="let hero of heroes$ | async"
   [class.selected]="hero.id === selectedId">
   <a [routerLink]="['/hero', hero.id]">
    <span class="badge">{{ hero.id }}</span>{{ hero.name }}
   </a>
  </li>
 </ul>

以上是官网示例

下面我们用我自己的示例介绍一下:

首先是列表页,以及跳转方式

代码如下:

<p *ngFor="let item of items" [routerLink]="['/listDetail',item.id]">{{item.name}}</p>

然后是配置路由:(单值传入的方式需要在详情组件路由配置)

{
  path:'listDetail/:id',
  component:ListDetailComponent
 },

传入后就是取到参数,在详情组件的ngOnInit生命周期获取参数

 ngOnInit() {
  this.route.params
   .subscribe((params: Params) => {
    this.id = params['id'];
    console.log(this.id);
    console.log('传值');
    console.log(params)
   })
 }

2.我们在平时的复杂的业务场景我们需要传多个数据,这时候该怎么办呢?这时候我们就用到了queryParams

代码如下:

<p *ngFor="let data of datas" [routerLink]="['/listDetails']" [queryParams]="{id:data.id,state:data.state}">{{data.name}}</p>

这里数据我是直接拿上去的,同样你可以组织好数据,一个参数放上去,简化html结构,现在有个问题,这样多值传入路由参数怎么配置呢?/:id/:id???我这个参数多少也不是固定的咋办?其实这种方式不需要配置路由!你只需要传入和取到数据就可以了!

 ngOnInit() {
  this.route.queryParams
   .subscribe((params: Params) => {
    this.id = params['id'];
    this.state = params['state'];
    console.log(params)
    console.log(this.id);
    console.log(this.state);

   })
 }

以上就是Angular路由传值两种方式!希望对大家有帮助!也希望大家多多支持我们。

赞 (0)

相关推荐

  • angularjs路由传值$routeParams详解

    angularjs路由传值$routeParams详解

    AngularJS利用路由传值,供大家参考,具体内容如下 1.导包 <script src="angular.min.js"></script> <script src="angular-route.js"></script> 2.依赖注入ngRoute var myapp=angular.module("myapp",["ngRoute"]); 3.配置路由 myapp.con

  • 详解Angular5路由传值方式及其相关问题

    目前Angular已经升级到了稳定版本Angular5,这次升级更小更快以及更稳定!路由可以说是Angular甚至是单页应用的核心部分了吧!在angularjs中的路由最大的缺点就是无法嵌套路由,在Angular中解决了这个问题!在Angular中路由不仅仅是页面跳转,其中还有一项叫英雄列表跳转英雄详情!在诸多的列表,不可能给每个英雄做一个详情页,于是乎路由参数起到作用了!通过路由传入参数识别那个英雄的详情! 现在对于路由传值进行详解,首先一种方式是官网的导航到详情的单值id传入,另一种是多数据

  • 详解Angular5 路由传参的3种方法

    本文介绍了Angular5 路由传参,一共3种方法.分享给大家,具体如下: 1.问号后面带的参数,获取参数的方式:ActivatedRoute.queryParams[id] 例如:/product?id=1&name=iphone还可以是: [ routerLink]= "['/books']" [ queryParams]= "{bookname:'<活着>'} 代码:html <h4>Messages</h4> <p&g

  • 详解vue 路由跳转四种方式 (带参数)

    1.  router-link 1. 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始. 2.带参数 <router-link :to="{name:'home', para

  • 详解react组件通讯方式(多种)

    1.父组件向子组件传值 父组件向子组件传值一般采用props属性传递 父组件: import React from 'react' import Child from './Child' const dataList = [ { id: '001', value: '张三' }, { id: '002', value: '李四' } ] const Parent = props => { return ( <ul> <Child dataList={dataList}><

  • 详解vue路由

    前端路由和后端路由: 后端路由:对于普通的网站,所有的超链接都是url地址,所有url都对应服务器上对应的资源 前端路由:对于单页面应用程序来说,主要通过url的hash(#)来实现不同页面的切换,同时hash还有一个特点HTTP请求中不会包含hash相关的内容,所以单页面程序中的页面跳转主要用hash实现 在单页面应用程序中这种通过hash来改变页面的方式称作前端路由区别于后端路由 路由的使用 1.创建一个路由对象,当导入vue-router包之后,在window全局对象中就有一个路由的构造函

  • 详解React路由传参方法汇总记录

    详解React路由传参方法汇总记录

    React中传参方式有很多,通过路由传参的方式也是必不可少的一种. 本文记录项目中会用到的路由传参方式: 路由跳转传参API + 目标路由获取参数的方式. 一.动态路由 跳转方法 Link <Link to={{ pathname: "/user/add/1" }}>跳转新增页面</Link> history.push this.props.history.push("/user/add/1"); 获参方法 this.props.match.

  • 详解VueRouter 路由

    详解VueRouter 路由

    目录 vue router 1.认识路由的概念 1.1.何为路由 1.2.后端路由阶段 1.3.前端路由阶段 1.4.前端渲染和后端渲染? 2.前端路由的规则 2.1.URL的hash 方式 2.2.HTML5的history模式 3.route-view的基础 3.1 认识vue-router 3.2.安装和使用vue-router 3.3.路由的默认路径 3.4.HTML5的history模式 3.5.router-link补充 3.6.路由代码跳转 3.7.动态路由 4.路由的懒加载 4.

  • spring、mybatis 配置方式详解(常用两种方式)

    spring、mybatis 配置方式详解(常用两种方式)

    在之前的文章中总结了三种方式,但是有两种是注解sql的,这种方式比较混乱所以大家不怎么使用,下面总结一下常用的两种总结方式: 一. 动态代理实现 不用写dao的实现类 这种方式比较简单,不用实现dao层,只需要定义接口就可以了,这里只是为了记录配置文件所以程序写的很简单: 1.整体结构图: 2.三个配置文件以及一个映射文件 (1).程序入口以及前端控制器配置 web.xml <?xml version="1.0" encoding="UTF-8"?> &

  • 基于YUV 数据格式详解及python实现方式

    YUV 数据格式概览 YUV 的原理是把亮度与色度分离,使用 Y.U.V 分别表示亮度,以及蓝色通道与亮度的差值和红色通道与亮度的差值.其中 Y 信号分量除了表示亮度 (luma) 信号外,还含有较多的绿色通道量,单纯的 Y 分量可以显示出完整的黑白图像.U.V 分量分别表示蓝 (blue).红 (red) 分量信号,它们只含有色彩 (chrominance/color) 信息,所以 YUV 也称为 YCbCr,C 意思可以理解为 (component 或者 color). 维基百科上的 RGB

  • 详解pytorch tensor和ndarray转换相关总结

    在使用pytorch的时候,经常会涉及到两种数据格式tensor和ndarray之间的转换,这里总结一下两种格式的转换: 1. tensor cpu 和tensor gpu之间的转化: tensor cpu 转为tensor gpu: tensor_gpu = tensor_cpu.cuda() >>> tensor_cpu = torch.ones((2,2)) tensor([[1., 1.], [1., 1.]]) >>> tensor_gpu = tensor_

随机推荐