Angular2中如何获取GET参数?

2023-12-12

通过访问myproject.dev/people?filter%5Bindustry%5D=finance&filter%5BstartWith%5D=a, Angular2将url指向myproject.dev/people

这是我的路线配置:

@RouteConfig([
    {
        path: '/people',
        name: config.route.main,
        component: MainComponent,
        useAsDefault: true
    }
])

在主要组件中:

/// <reference path="../../../typings/angular2.d.ts" />

import {Component, Injector} from 'angular2/core';
import {ROUTER_DIRECTIVES, Router, RouteParams} from 'angular2/router';
import {BaseResourceComponent} from '../../Component/BaseResourceComponent';
import {Status as MainStatus} from '../../reusable/modules/status.svc';

import {Status} from '../../reusable/modules/status.svc';
import {Config} from "./Config";

import URI from 'urijs';

export class MainComponent extends BaseResourceComponent {
    constructor(config: Config, status: Status, mainStatus: MainStatus, private router: Router, private routeParams: RouteParams) {
        super(config, status, mainStatus);
    }

    onInit() {
        var path = new URI(window.location.href);
        path.setQuery('filter[industry]', 'fashion');
        path.setQuery('filter[startWith]', 'a');

        console.log(path);
        console.log(this.router);
        //this.router.root.lastNavigationAttempt = "/people?filter%5Bindustry%5D=finance&filter%5BstartWith%5D=a"

        console.log(this.routeParams);
        // this.routeParams returns {params: Object}
        // this.routeParams.params.get('filter') return null
    }
}

我仍然可以从this.router.root.lastNavigationAttempt,但这只是获取它的一种棘手方法。有更好的方法获取 GET 参数吗?


在根组件中,您可以注入路由器并订阅,然后在路由事件上从路由器获取参数,例如

export class AppComponent {
  constructor(private router:Router) {
    router.subscribe(route => {
      console.debug(this.router.currentInstruction.component.params);
    });
  }
}

在路由器添加的组件上,您可以注入RouteParams直接喜欢

export class Other{
    constructor(private routeParams: RouteParams) {
    console.debug(this.routeParams);
    console.log(this.routeParams.get('filter_industry'));
    console.log(this.routeParams.get('filter_start_with'));
  }
}

笨蛋的例子

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

Angular2中如何获取GET参数? 的相关文章

  • 如何使 Angular Reactive Formarray 中的级联下拉菜单工作而不弄乱下拉值

    我有一个角度 4 的表单 其中包含名字 姓氏和一个包含 2 个下拉菜单 选择 的表单数组 用作级联下拉菜单和一个删除按钮 表单的其余部分还包含一个发送按钮和一个添加选项按钮 我在此处添加了屏幕截图 以便您更好地理解 表单添加 删除按钮和发送
  • 如何在 angularjs 4 中设置 http 调用超时?

    我在 angularjs 4 官方页面上看到过 https angular io guide http https angular io guide http 设置http调用超时但我没有找到任何参考 有人尝试过设置吗 谢谢 如果您使用 R
  • 从 Angular 2 动态表单的 API 设置值

    我正在尝试开始在 Angular 2 中创建动态表单 并且我正在使用 Angular 食谱中的设置here https angular io docs ts latest cookbook dynamic form html作为我的起点 我
  • Angular2 中 Http 的 Promise 与 Observable? [复制]

    这个问题在这里已经有答案了 本质上 正如标题所说 是否有任何理由使用可观察的承诺 https stackoverflow com questions 37364973 angular 2 promise vs observable为了进行
  • Angular2 + Laravel 与实时和 WebSockets

    我构建了一个应用程序 并计划与 Angular 2 和 laravel 进行实时战斗 例如 你按下 攻击 按钮 你的对手就会实时看到他的生命在下降 我的应用程序构建有 前端 角2 Backend PHP Laravel 5 2 现在我正在寻
  • Angular 2\4 哈希 url 保留index.html

    背景 Angular 4 ng cli RouterModule useHash true 当我使用浏览到我的应用程序时http server index html它决定http server url 中省略了index html 此外 每
  • Angular 中的文件输入事件类型

    所以我已经使用 Angular 和 Typescript 很长时间了 我似乎无法找出输入文件的类型是什么 例如
  • 单击上一页的按钮路由到该页面后如何刷新页面

    我有 2 个页面 一个主页和一个页面 2 当我单击主页上的按钮时 它会路由到 page2 现在 单击主页上的按钮后 当我到达第 2 页时 它应该刷新 因为我的项目中存在一些缓存问题 我在ngoninit上添加了window location
  • 从父组件调用的子组件内的 Angular 2 ng2-bootstrap 模式

    很难解释这一点 我有一个简单的 ng2 bootstrap 模式示例 我将其扩展为包含主页的 Boostrap 4 Jumbotron 示例模板 现在 ng2 bootstrap 模式不执行任何操作 我可以看到this childModal
  • 在 Angular 6 服务中获取当前路由参数的最佳方法是什么?

    我试图找出在 Angular 6 中获取当前路由参数的最佳方法是什么 目前我必须通过ActivatedRoute到服务的方法作为参数 然后在服务中使用它 export class MainComponent constructor priv
  • 拖动元素时是否禁用 mousemove 事件?

    我试图通过在拖动元素时观察文档上的 mousemove 事件来移动元素 使用 html5 拖放 我在文档的父元素上添加了一个 mousemove 侦听器 每当我移动鼠标时都会触发该监听器 但是一旦我开始拖动另一个子元素 我就不再看到 mou
  • 如何让Angular2绑定innerHTML中的组件

    我想创建一个组件myApp它将把控制器上的属性中的 HTML 嵌入到其模板中 但是 其中一些 HTML 可能包含其他组件选择器 import InfoComponent from Component selector myApp templ
  • Angular 2 runOutsideAngular 仍然改变 UI

    从我的理解来看runOutsideAngular https angular io docs ts latest api core index NgZone class html runOutsideAngular anchor 如果我需要
  • D3、TS 和 Angular 2

    我正在尝试将 D3 v4 与 Angular 2 Typescript 一起使用 我目前正在研究 D3 v4 我能够遵循 stackoverflow 中类似问题的一些答案 但没有成功 我已经导入了大部分 D3 库及其类型 我使用的是 TS
  • 如何在 PHP 中使用 cURL 发出同时包含 GET 和 POST 参数的请求?

    其他人已经问过如何从 perl java bash 等执行此操作 但我需要在 PHP 中执行此操作 并且我没有看到任何已提出的专门与 PHP 相关的问题 或包含 PHP 的答案 My code ch curl init url curl s
  • 订阅内循环订阅?

    我目前正在与订阅内的 multiples forEach 订阅作斗争 我正在尝试检索对象列表 然后通过它们的 ID 检索它们的图像 目前我已经这样做了 this appTypeService get pipe map apps AppTyp
  • Angular 模板验证表单

    我正在研究表单验证 我正在使用模板驱动的验证表单 其编码如下 现在工作正常 但是当我尝试添加时 username ngModel and password ngModel 在创建验证类的输入中 它向我显示一个错误 也请找到该错误 div c
  • jQuery - 找不到函数?

    有人可以解释一下为什么下面的代码会抛出错误吗 JavaScript Document document ready function port box css display none ul portfolio li a bind clic
  • 在 Angular 5 中,如何从父组件访问动态添加的子组件?

    我正在开发一个 Ionic Angular 5 项目 我需要动态加载一些组件 继动态组件加载器示例 https angular io guide dynamic component loader在 Angular 文档中 我能够成功加载组件
  • 带纱线的 Angular CLI

    如何将 Angular Cli v6 0 3 的包管理器更改为yarn 我试过 ng set global packageManager yarn 但 Angular 说 get set 已被弃用 取而代之的是 config 命令 ng c

随机推荐

  • 从 Windows 禁用打印屏幕键盘选项

    有什么办法可以禁用打印屏幕键盘上的按钮 当然不会破坏它的键 我使用的是Windows 7 我需要它是因为提高了少数员工使用的数据库的安全性 如果您操作扫描码映射注册表项 则可以禁用任何键 可以找到一个包含设置说明的小教程here 扫描码图更
  • Crystal Reports 中的条件组 SUM

    我一直在做一些会计报告 并使用公式总结我的不同货币 IE 加拿大委员会公式 if myData 1 CurrencyType CDN then myData 1 Commission else 0 加拿大佣金总额 SUM CanadianC
  • 如何更改分屏 emacs 窗口的大小?

    我将 emacs 水平分割 在顶部我正在编辑 Perl 代码 底部是 shell 默认情况下 emacs 使两个窗口大小相等 但我希望 shell 缓冲区更小 也许是一半大小 我想知道我怎样才能做到这一点 使用鼠标 您可以拖动窗口大小 单击
  • 在java中将word文件另存为html

    我尝试使用java将word文件另存为html 我将 Word 文件另存为 xml 它对我有用 Runtime rt1 Runtime getRuntime rt1 exec C Program Files Microsoft Office
  • EditText 的子类看起来与 Android 4 上的普通 EditText 不同

    这是我在开发真实应用程序时发现的一个 错误 但我创建了一个空白项目来重现它 我有以下布局
  • 从不同用户会话列表中选择最早的日期和时间

    我有一个用户访问会话表 记录网站访问者活动 accessid userid date time url 我正在尝试检索用户 ID 1234 的所有不同会话 以及每个不同会话的最早日期和时间 SELECT DISTINCT accessid
  • CS7036 C# 没有给出与 c# 所需的形式参数相对应的参数

    我创建了 bool dropIndexes 来 void ladujZBazy 并创建了 if dropIndexes 因为当我检查 checkListBox1 中列表中的项目并使用 textBox1 搜索某些项目时 我之前的检查消失了 我
  • 修饰符 static 只允许在常量变量声明中使用

    我有一个内部类 用于存储我用于游戏的控件的信息 现在我想在其中存储一个静态 ArrayList 其中包含所有控件的名称 但我收到此错误 修饰符 static 只允许在常量变量声明中 private class Control public
  • 获取鼠标指针下的单词

    根据这个 使用 JavaScript 获取光标下的单词 链接我可以在鼠标指针下获取单词 这对于英语来说很好 我改变它 阿拉伯语 p p Word span span
  • Android 上的 ZXing 入门

    我正在尝试将 ZXing 添加到我的项目中 添加一个按下时调用扫描仪的按钮 我找到了这个 http groups google com group android developers browse thread thread 788eb5
  • 如何重命名 Oracle XMLTYPE 节点

    我在 PL SQL 中有一个 XMLType 我需要重命名一些节点和一些值 例如
  • 无法安装 Flask-Mail

    当用户在我的网站上注册时 我尝试使用 Flask 发送电子邮件 我使用了命令pip install Flask Mail安装 但是 我收到以下可能版本不匹配的错误 Downloading unpacking Flask mail Downl
  • Angular2 的 Http.post 在 POST 方法调用的响应中不返回标头

    我正在调用 REST 端点 我想添加资源 如下 但是 当我的服务调用 Http 的 post 方法时 它将调用请求 但不会返回响应的标头 至少 我遇到了 Response 实例的空 headers 对象 我确实期望响应标头 特别是 我希望
  • 如何从 VBA 函数返回结果

    如何从函数返回结果 例如 Public Function test As Integer return 1 End Function 这会产生编译错误 如何让这个函数返回一个整数 对于非对象返回类型 您必须将值分配给函数的名称 如下所示 P
  • 从数据框中按类别选择随机行?

    我有一个数据框如下 Category Name Value 我如何选择每个类别 5 个随机名称 使用sample使用所有行作为可能的候选行返回随机行 但是 我想指定每个类别的随机行数 有什么建议么 Update 我愿意使用ddply 在没有
  • Rabin-Karp 中的滚动哈希

    我正在尝试实现 Rabin Karp 来查找子字符串 我陷入了滚动哈希 试图使用维基百科中建议的公式 define MOD 1000000007 unsigned long long rolling hash const char str
  • 我不小心删除了 phpMyAdmin 中的管理员帐户。如何重新授予 root@localhost 权限?

    我不小心删除了 phpMyAdmin 中的管理员帐户 现在 我根本无能为力 但是 我可以访问控制台 并且它可以让我登录 我如何重新向 root localhost 授予权限 有一个简单易行的方法可以解决这个问题 您需要停止 mysql 并转
  • 根据 WooCommerce 中的自定义结账单选按钮和文本字段设置动态费用

    我正在尝试创建一个自定义结帐单选按钮 以百分比计算餐厅小费 对于单选按钮 静态值工作正常 但是 我想获取小计并计算自定义单选按钮单击的一定百分比 这是我的代码 add action woocommerce after checkout bi
  • 如何获取所选的特定项目?

    附截图 我正在学习 AngularJS 我找不到方法来删除单击 删除 按钮的所选项目 有什么办法可以做到吗 附代码 ul class unstyled li li ul
  • Angular2中如何获取GET参数?

    通过访问myproject dev people filter 5Bindustry 5D finance filter 5BstartWith 5D a Angular2将url指向myproject dev people 这是我的路线配