社区首页 >问答首页 >Angular2中的路径参数

Angular2中的路径参数
EN

Stack Overflow用户
提问于 2016-12-01 12:46:11
回答 2查看 994关注 0票数 2

在对网络服务进行RESTful调用时,我们应该如何处理Angular 2中的路径参数呢?

我已经找到了用于查询参数的URLSearchParams对象,但从我找到的情况来看,我们似乎只能将就路径本身的字符串连接。喜欢

代码语言:javascript
代码运行次数:0
复制
let url = 'api/v1/something/' + encodeURIComponent(someParameter) + 
          '/etc/' + encodeURIComponent(anotherParam) + '/and/so/on';

是否包含在angular2中,其功能类似于:

代码语言:javascript
代码运行次数:0
复制
let url = new URL('api/v1/something/{id}/etc/{name}/and/so/on', param1, param2);

当然,我自己也可以创建类似的东西,但如果angular2中包含了一些东西,我会更喜欢。

EN

回答 2

Stack Overflow用户

发布于 2017-03-24 18:20:56

实际上,假设已经设置和编码了idname,那么您可以使用string interpolation和几乎与您建议的完全相同的东西。

代码语言:javascript
代码运行次数:0
复制
let url = new URL(`api/v1/something/${id}/etc/${name}/and/so/on`);

我要指出的是,目前the ES6 URL类只支持searchParams,但没有路径参数的概念。

而且,我知道没有一种方法可以在不使用URLSearchParams实现your own QueryEncoder的情况下自动对参数进行编码

票数 4
EN

Stack Overflow用户

发布于 2017-05-12 12:24:04

如果有人感兴趣,这就是我最终要做的:

代码语言:javascript
代码运行次数:0
复制
export interface PathParameters {
  [parameterName: string]: string;
}

export class Url {

  public static create(url: string, parameters: PathParameters) {
    const placeholders = url.match(/({[a-zA-Z]*})/g);
    placeholders.forEach((placeholder: string) => {
      const key = placeholder.substr(1, placeholder.length - 2);
      const value = parameters[key];
      if (!value) {
        throw new Error(`parameter ${key} was not provided`);
      }
      url = url.replace(placeholder, encodeURIComponent(value));
    });
    return url;
  }

}

使用方法:

代码语言:javascript
代码运行次数:0
复制
const url = Url.create('/api/cars/{carId}/parts/{partId}', {
    carId: carId,
    partId: partId
  });
票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/40911065

复制
相关文章
如何配置Seata以便与应用程序集成?
Seata是一款开源的分布式事务解决方案,可以为分布式应用程序提供事务管理和协调功能。为了实现Seata与应用程序的集成,需要进行如下几个步骤:
用户1289394
2023/09/11
3010
如何配置Seata以便与应用程序集成?
页面参数传递
在doctor_ask.html页面,把在url中的参数取下来,要使用一个方法getQueryString(),其中有一个方法是用来获取url中含有中文参数的:
一觉睡到小时候
2019/07/03
3.2K0
Angular2 页面的生命周期
当被绑定的输入属性的值发生变化时调用,首次调用一定会发生在 ngOnInit之前。
用户1437675
2018/08/20
6980
错误页面定制与视图传递多个参数
一、错误页面定制 视图函数 <span class="hljs-meta">@app.errorhandler(404)</span> <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">page_not_found</span><span class="hljs-params">(e)</span>:</span> <span class="hljs-keyword">
星哥玩云
2022/09/14
1K0
利用fluorineFx将DataTable从.Net传递到Flash
FluorineFx自带的示例都不错,就是有点不简洁,下面的代码基本上已经最简版了(环境vs2010) 1、先创建一个Web Application,然后添加FluorineFx以及FluorineFx.ServiceBrowser的引用 这二个程序集的默认位置在: C:\Program Files (x86)\FluorineFx\Bin\net\3.5\FluorineFx.dll C:\Program Files (x86)\FluorineFx\Bin\net\3.5\FluorineFx.Serv
菩提树下的杨过
2018/01/23
2.4K0
利用fluorineFx将DataTable从.Net传递到Flash
使用Helm将应用程序部署到IBM Cloud上的Kubernetes
Helm是Kubernetes的包管理器。借助Helm,您可以非常方便地将应用程序,工具和数据库(如MongoDB,PostgreSQL,WordPress和Apache Spark)部署到您自己的Kubernetes集群中。以下简要介绍如何将Helm用于IBM Cloud Container服务。
johnniang
2018/01/15
2K0
使用Helm将应用程序部署到IBM Cloud上的Kubernetes
本文介绍了如何使用Helm将应用程序部署到IBM Cloud上的Kubernetes,包括详细的步骤和示例。
Techeek
2018/01/08
1.6K0
angular2 路由之间的页面跳转
angular2路由页面之间的跳转, 只需要在需要跳转的ts文件中引入 import {Router} from '@angular/router'; 然后在 constructor(public router:Router) { } 定义好router,这样就可以使用Router中的属性了 doJump(){     this.router.navigate(['/index'])//跳转到新的路由页面 } so easy吧!
杭州前端工程师
2018/06/15
3.3K0
如何将Redux与React Hooks一起使用
React Redux在2019年6月11日发布的7.1版中提供了对Hooks的支持。这意味着我们可以在函数组件中将Redux与Hooks一起使用,而不是使用高阶组件(HOC)。
前端知否
2020/03/23
7K0
如何将Redux与React Hooks一起使用
将Spring Boot应用程序部署到Bluemix
在之前的博客文章中,我介绍了如何通过Swagger在Spring Boot应用程序中记录REST API。下面我将介绍如何将这些应用程序作为Docker容器部署到IBM Bluemix。作为例子,我再次使用Spring REST示例。在之前的博客文章中,我介绍了如何通过Swagger在Spring Boot应用程序中记录REST API。下面我将介绍如何将这些应用程序作为Docker容器部署到IBM Bluemix。作为例子,我再次使用Spring REST示例。
FLYMOTH
2018/01/15
2.5K0
将Spring Boot应用程序部署到Bluemix
将Spring Boot应用程序部署到Bluemix
在之前的博客文章中,我介绍了如何通过Swagger在Spring Boot应用程序中记录REST API。下面我将介绍如何将这些应用程序作为Docker容器部署到IBM Bluemix。我会再次使用S
johnniang
2018/01/08
2.4K0
将Spring Boot应用程序部署到Bluemix
将Spring Boot应用程序部署到Bluemix
在之前的博客文章中,我介绍了如何通过Swagger在Spring Boot应用程序中记录REST API。下面我将介绍如何将这些应用程序作为Docker容器部署到IBM Bluemix。我将再次使用S
电工昌威
2018/01/05
2.4K0
将Spring Boot应用程序部署到Bluemix
Angular2 组件(页面)之间如何传值
在Angular 2中,数据和事件变化检测从上到下发生从<b>父级到子级。</b>
用户1437675
2018/08/20
4K0
Angular2 组件(页面)之间如何传值
使用Helm将应用程序部署到IBM Cloud上的Kubernetes上
本文介绍了如何使用Helm将应用程序部署到IBM Cloud上的Kubernetes集群中。首先介绍了Helm的作用和如何使用Helm部署应用程序,然后详细说明了如何在IBM Cloud上使用Helm部署MongoDB。最后,提供了如何获取IP地址和端口的示例。
shaonbean
2018/01/09
1.3K0
将WordPress发布到静态GitLab页面站点
通过 GitLab 或 GitHub Pages 来提供一个 WordPress 镜像站点, 从而最小化安全问题。
星哥玩云
2022/07/14
6510
Angular2 VS Angular4 深度对比:特性、性能
在Web应用开发领域,Angular被认为是最好的开源JavaScript框架之一。
葡萄城控件
2022/05/09
8.7K0
Angular2 VS Angular4 深度对比:特性、性能
将windows应用程序注册为windows服务
@echo off ::设置服务名称 set service_name=ServiceManagement ::设置服务描述 set service_description=文件安全上传服务 ::设置服务程序路径 set prog_path=%cd:\=\\%\\ServiceManagement.exe ::设置服务的启动方式 auto:自动 demand:手动 disabled:禁用 set strt=auto echo EasyService 一键服务 echo =========================================================== ::pause ::======================以下部分勿随意修改========================== set s32=%cd%\system32 set reg_file=EasyService.reg net stop %service_name% 2>nul
FreeTimeWorker
2020/08/31
1.4K0
Meteor 微信公共号开发将客户端日志传递到服务端打印
因为在微信客户端环境,我们无法使用 console.log 查看前端显示的一些调试信息,如果需要用到调试,我们一般是使用 Session 方法来给前端一个固定专门显示日志的变量设定属性,这样这个固定的变量会跟随 Session.set 设定的值而变化。后面想了一个比较方便的办法,直接将客户端需要输出的日志信息通过 Meteor.call 发送到服务端打印我们就可以方便的在服务端一起看到server log 和 client log 了。
我与梦想有个约会
2023/10/20
1870
Meteor 微信公共号开发将客户端日志传递到服务端打印
将静态页面部署到github.io
  我的腾讯云服务器是之前利用学生身份(有优惠)买的,现在快到期了,而且服务器上面只有一个引导页(静态页面)还有用,别的项目都没有用了。所以就想找一种不花钱买服务器就可以访问到我的引导页的方法。然后突然间想到了之前小伙伴说过hexo写博客非常方便而且是托管到github上的,我就想能不能用类似的方法把自己的静态页面也托管到github上。
lin_zone
2019/09/24
1.6K0
点击加载更多

相似问题

将参数传递给服务以便与$http.get()一起使用

32

如何将文件传递到Docker容器以便与容器一起使用?

15

将.vue发布到npm以便与browserify一起使用

11

将javascript变量传递给PHP以便与Google一起使用

15

将值从服务传递到组件(Angular2)

20
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文