Angular2:如何操作 url 查询字符串?

2024-04-03

在角 1 中,有一个$location.search()可以操作 URL 查询字符串的函数。 Angular2 等价于什么?

I tried

import {Location} from 'angular2/angular2';

and

import {URLSearchParams} from 'angular2/angular2';

没有运气。


简短回答(TypeScript):

// Import you were looking for
import {Http, Response, Headers, RequestOptions, URLSearchParams} from 'angular2/http';
//... jump down some code
export class MyRegistrationsComponent {
    constructor(private http: Http) { }

    getDudesAndDudettes() {
        let headers = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({
            headers: headers,
            // Have to make a URLSearchParams with a query string
            search: new URLSearchParams('firstName=John&lastName=Smith}')
        });

        return this.http.get('http://localhost:3000/MyEventsAPI', options)
            .map(res => <Dudes[]>res.json().data)
  }

这些文档可以在以下位置找到:RequestOptions 的 Angular2 API 文档 https://angular.io/docs/ts/latest/api/http/index/RequestOptions-class.html。您会注意到search参数是一种类型URLSearchParams https://angular.io/docs/js/latest/api/http/URLSearchParams-class.html

另一个例子是在Angular2 指南 https://angular.io/docs/ts/latest/guide/server-communication.html#!#search-parameters(不要介意 JSONP 的东西,它通常也是如何对正常的 http 请求使用查询参数)。

参考以不同的方式解释它:如何在 Angular 2 中使用 URLSearchParams https://stackoverflow.com/questions/34386367/how-to-utilise-urlsearchparams-in-angular-2/34413223#34413223

另外,如果你没有导入RxJS https://angular.io/docs/ts/latest/guide/server-communication.html#!#rxjs在你的app.ts可观察到的功能将会被破坏。

TypeScript 中更完整的示例:

import {Component}      from 'angular2/core';
import {Http, Response, Headers, RequestOptions, URLSearchParams} from 'angular2/http';
import {Registrant}     from './registrant';
import {Registration}   from './registration';
import {Observable}     from 'rxjs/Observable';

@Component({
    selector: 'my-registrations',
    templateUrl: 'app/my-registrations.component.html',
    inputs: ['registrant']
})

export class MyRegistrationsComponent {
    constructor(private http: Http) { }

    private _registrantionsUrl: string = 'http://localhost:3000/MyEventsAPI';
    private _title = 'My Registrations Search';
    public registrant: Registrant = { firstName: "John", lastName: "Smith" };

    findMyEvents() {
        let body = JSON.stringify(this.registrant);
        let headers = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({
            headers: headers,
            search: new URLSearchParams(`firstName=${this.registrant.firstName}&lastName=${this.registrant.lastName}`)
        });

        return this.http.get(this._registrantionsUrl, options)
            .toPromise()
            .then(res => <Registration[]>res.json().data)
            .catch(this.handleError);
    }

    private handleError(error: Response) {
        console.error(error);
        return Observable.throw(error.json().error || 'Server error');
    }

}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular2:如何操作 url 查询字符串? 的相关文章

随机推荐

  • 有索引的搜索时间 > 无索引的搜索时间

    我有一个集合 numbers 其中包含 200000 个文档对象 其中 number i i 1 到 200000 没有任何索引 gt 10000 给出 nscanned 200000 和 115 ms 对于数字 gt 10000 的索引给
  • 在 PHP 中将时区偏移量转换为友好名称

    我正在尝试使用 PHP 将 RFC 时间戳转换为友好的日期 这是例子 Wed 17 Feb 2010 19 44 01 0500 我希望将其打印为 Wed 17 Feb 2010 19 44 01 EST 使用 date strtotime
  • 为什么 :before 和 :after 伪元素需要 'content' 属性?

    鉴于以下情况 为什么 after选择器需要内容属性才能运行吗 test width 20px height 20px background blue position relative test after width 20px heigh
  • 利用 JQuery find 或 inArray 方法查找数组中的项目

    我想知道是否有人知道使用 JQuery find 方法或 inArray 方法来查找数组中的项目的方法 我似乎在文档中找不到任何内容 例如 var items id 1 name bob id 2 name joe id 3 name be
  • 如何获取CPU一级缓存(主缓存)信息?

    我尝试使用 WMI 获取 CPU 缓存信息 效果很好 但仅适用于 2 级和 3 级缓存 所以我的问题是 如何获取 CPU 1 级缓存信息 这是WinAPI方式 它使用GetLogicalProcessorInformation http m
  • Visual Studio 2010 Beta 2 + ClearType

    我想知道 您对 Visual Studio 2010 编辑器 Beta 2 中的文本渲染满意吗 在我的主显示器上 即使使用 12 号字体 它看起来也非常模糊 当使用字体大小 10 或 11 时 效果很糟糕 可以为 VS code 窗口显式设
  • 找不到 Bottle 应用程序中的静态文件 (404)

    我已经回顾了这里有关此问题的所有问题 回顾了瓶子教程 回顾了瓶子谷歌小组讨论 据我所知 我做的一切都是正确的 但不知何故 我无法正确加载 CSS 文件 我在静态文件上收到 404 错误 http localhost 8888 todo st
  • javascript 字符串中的空值

    在 javascript 中我有以下内容 var inf id city 如果 id 或 city 为 null 则 inf 将为 null 有没有什么巧妙的方式来表示如果 id 或 city 为 null 则将其设为空白 我知道在 c 中
  • 使用 ML Kit 扫描条形码时出现黑屏而不是 QR 扫描仪

    在 Android 中创建条形码扫描仪的最简单方法可能是使用 Google Code Scanner APIhttps developers google com ml kit vision barcode scanning code sc
  • 如何使 T-SQL 游标更快?

    我在 SQL Server 2000 下的存储过程中有一个游标 现在无法更新 它更新所有表 但通常需要几分钟才能完成 我需要让它更快 而 GDEPO 入口仓库 CDEPO 出口仓库 Adet 数量 E CIKAN 已使用的数量 记录说明 2
  • mySQL 获取某些行的所有可能组合

    我在 mySQL 中有一个奇怪的请求 我发现了很多方法可以通过添加更多连接来对组合对或某个其他数字执行此操作 但我想知道是否有一种动态方法可以对任意数量的组合执行此操作 解释一下我是否有一个表 table 有 1 列 column id 和
  • 无法返回json数据,WCF Restful Service .NET 4.0

    我最近使用 Entity Framework 4 0 设置了 WCF Restful 服务 它与 XML 完美配合 但是当我尝试以 json 格式返回它时 我得到了 HTTP 1 1 504 Fiddler Receive Failure
  • 精确肤色 HSV 范围

    我已经看到关于皮肤 HSV 颜色空间范围的所有问题但我只能弄清楚这个 Code CvScalar hsv min cvScalar 0 30 60 0 CvScalar hsv max cvScalar 20 150 255 0 range
  • 如何从 WC_Subscription 实例对象获取订单详细信息

    这用于完成初始订阅付款和订阅续订 function payment made subscription How do I get the order details add action woocommerce subscription p
  • 使用另一个按钮切换引导按钮下拉菜单

    当单击另一个按钮时 获取 Bootstrap 按钮下拉菜单进行切换 使列表项和下拉 ul 元素可见 时遇到一些问题 这是我到目前为止似乎不起作用的内容 v3 3 7 我想要 测试 按钮另外切换 测试 按钮下拉列表 div class btn
  • rdd后面的数字是什么意思

    rdd后面括号里的数字是什么意思 RDD后面的数字是它的标识符 Welcome to version 2 3 0 Using Scala version 2 11 8 OpenJDK 64 Bit Server VM Java 1 8 0
  • 无法使用python列出谷歌驱动器中的文件

    不确定这是否与我的代码或 Google 方面的某些内容有关 但是我可以将文件推送到驱动器 但由于某种原因我无法列出文件夹内的文件 文件夹元数据 这是我正在使用的代码 SCOPES https www googleapis com auth
  • Spring Boot - @Value 注释不起作用

    我尝试使用 SmtpAuthenticator 创建邮件服务 组件已正确启动 但用户名和密码字段中存在空值 为什么 Component public class SmtpAuthenticator extends Authenticator
  • m2e 连接器 buildhelper 与 Eclipse Juno SR1 m2e 1.2 不兼容

    Update 将解决方案移至答案 Eclipse Juno SR1 安装 m2e 插件版本 1 2 m2e 连接器buildhelperEclipse 市场提供的与此版本的 m2e 插件不兼容 我一直在浏览各种邮件列表 但找不到更新的构建帮
  • Angular2:如何操作 url 查询字符串?

    在角 1 中 有一个 location search 可以操作 URL 查询字符串的函数 Angular2 等价于什么 I tried import Location from angular2 angular2 and import UR