Angular 路由传参数

原创 2018年04月16日 10:02:45

Angular路由传参

配置路由

通过 descr/1 等形式访问 DescrComponent,此时 1 为携带参数。

    { path: 'descr/:id', component: DescrComponent},
    { path:'position/:id',component:PositionAnalysisComponent},

访问模块

infor?.compPosition 为动态改变的参数,当通过该路由访问成功时,浏览器中的URL变为 position/1201

    <p  [routerLink]="['/position', infor?.cmpId]" class="position ">
         {{infor?.compPosition}}
         <span class="salary">{{infor?.compSalary}}</span>
    </p>

获取参数


1 .注入ActivatedRoute

queryParams() 中的参数是配置路由时的路径

import {ActivatedRoute, Params} from '@angular/router';
    id:string;
    constructor(private activatedRout: ActivatedRoute) {}
    this.id = this.activatedRout.snapshot.queryParams['id'];

2 .其余方法

获取路由参数

angular路由参数传递

最近在做一些angularJs的一个App项目,遇到关于页面间参数传递的一些问题,angularJs的参数传递可以有很多方式,例如用Factory,基于factory和$rootScope.$broa...
  • mik201408
  • mik201408
  • 2016-02-29 16:50:55
  • 12826

angular.js 路由及页面传参

(1)自带路由ngRoute AngularJS 路由实例 AngularJS 路由应用 名: ...
  • u013378306
  • u013378306
  • 2016-11-03 14:57:18
  • 15668

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

研究ng4的官网,终于找到了我想要的方法。我想要的结果是用‘&’拼接参数传送,这样阅读上是最好的。 否则很多‘/’的拼接,容易混淆参数和组件名称。 一般我们页面跳转传递参数都是这样的格式: http:...
  • sky_beyond
  • sky_beyond
  • 2017-10-19 11:13:15
  • 3582

关于angular2路由传参

在开发一个网站中遇到需要在路由传参的需求,一个示例列表组件,其中每个示例项点击进入均可加载该示例详情页。 在路由中传参有3种方法: 1.routerLink 单一参数:在中加router...
  • yxmanyxman
  • yxmanyxman
  • 2017-08-31 15:47:25
  • 6620

《Angular2入门系列实践》——如何实现路由传值

背景 Angular项目下一个路由如何接收到上一个路由url中的参数id?解决方案 1.父路由routes配置方式:export const EvaluationQuestionnaire...
  • changyinling520
  • changyinling520
  • 2017-09-05 21:15:23
  • 1446

angularJs 中ui-router 路由向controller传递数据

页面上 :  ui-sref="home.dataAnalysis({role:'thirdpart:tokenverify',menuType:'a'})" 路由设置 .state('hom...
  • u014087707
  • u014087707
  • 2016-08-22 17:42:08
  • 5021

angular1.x ui-route传参的三种写法

.state('classrooms',{ url: '/classrooms/:id' }) .state('classrooms',{ url: '/classrooms/{id}...
  • baidu_31333625
  • baidu_31333625
  • 2017-03-15 15:38:32
  • 3221

angular.js 路由及页面传参与缓存

http://blog.csdn.net/u013378306/article/details/53021565
  • baidu_31333625
  • baidu_31333625
  • 2017-05-11 15:15:34
  • 995
收藏助手
不良信息举报
您举报文章:Angular 路由传参数
举报原因:
原因补充:

(最多只允许输入30个字)