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参数? 的相关文章

  • 如何显示 GroupList 的 FormArray?

    我正在尝试制作一个交互式表单 在每一行上列出一个项目以及一个删除按钮 在我的示例中称为 verwijderen 这些项目是从数据库中检索的 并且每个项目都实例化为名为的自定义对象LaborPeriod 然后这些对象被转化为FormGroup
  • 角度 4 单击按钮功能未触发

    我正在尝试检查文本输入是否为空或不在角度 4 中 我没有为此使用表单 这只是一个输入字段 当我在下面的按钮中执行 addLocaton 函数时 需要进行检查 我的输入字段
  • 角度代理配置不起作用

    我不明白我错在哪里 附 已经尝试通过这个答案修复但仍然不起作用 Angular CLI 代理到后端不起作用 https stackoverflow com questions 39809008 angular cli proxy to ba
  • 资产未考虑基本 href url - 未找到错误

    我刚刚在 Webform 项目中复制了 Angular 构建脚本 并将该项目部署到 IIS 中 注意 我只复制了脚本文件 没有单独部署在 IIS 中 我已将 Angular dist 文件夹复制到 Webform 项目的 Scripts 文
  • Angular 2 重复标头

    使用时出现重复标头问题
  • 创建 AoT 兼容的服务工厂

    我正在尝试为缓存服务创建一个服务工厂 主要要求是每次可以使用不同的字符串实例化单个服务 最终的结果会有多个cache每个服务都由唯一定义databaseName 每个缓存可以有一个或多个stores也由唯一定义storeName 其他服务将
  • Angular 4 显示其中的数据

    我不喜欢从 API 返回到我的 Angular 4 应用程序的数据 这是 JSON 的示例 我不关心美元 但这是我正在处理的数据类型 最终目标是在页面上展示 Coin Price BTC 4 281 28 ETH 294 62 etc JS
  • Angular firestore 查询 firestore 文档

    我有以下查询 selectedUser AngularFirestoreDocument
  • 如何更改 Angular Material 选择中的滚动条样式?

    我们需要帮助来更改 Angular Material 的 Select 组件中的滚动条 实现了以下演示 https stackblitz com angular bxbvndrpogl file app 2Fselect reset exa
  • Angular 6 中的 Http 错误处理

    我正在尝试使用 Angular 6 中的以下类来处理 http 错误 我从服务器收到 401 未经授权状态 但我没有看到控制台错误消息 HttpErrorsHandler ts 文件 import ErrorHandler Injectab
  • Angular with/Angular Material - 对话框主题损坏

    您好 我遇到了 Angular Material 主题在对话框组件中中断的问题 其中文本和其他组件的颜色未按应有的方式工作 在 app component 中 我有一个设置图标按钮来打开对话框 main settings dialog 但当
  • Angular 5 Http拦截器刷新JWT令牌

    我已经实现了令牌保存 检索的逻辑 并且我也有刷新调用 问题是 当我在 HttpInterceptor 中拦截 403 时 同时进行的其他调用也会刷新令牌 我很乐意保留这些调用 直到我的令牌刷新为止 创建我所说的请求 信号量 Injectab
  • 如何判断何时创建新组件?

    我一直在寻找背后的逻辑当有人在 AngularJS Angular 上的 Web 应用程序中创建新组件时但我认为这更通用 可能适用于所有基于组件的前端框架 我知道有像这样的一些原则应该是抽象的和可重用的但例如我在角度文档中看到 每个单独的路
  • Angular 7:ng 测试挂起,不断重复运行测试

    我最近将 Angular 6 应用程序迁移到角7 my 包 json看起来像这样 name myApp version 3 0 0 license MIT scripts ng ng start ng serve public host h
  • Angular 4 过滤器搜索自定义管道

    所以我试图构建一个自定义管道来在 ngFor 循环中执行多个值的搜索过滤器 我花了几个小时寻找一个好的工作示例 其中大多数都是基于以前的版本 并且似乎不起作用 所以我正在构建管道并使用控制台为我提供值 但是 我似乎无法显示输入文本 以下是我
  • 如何在 Angular 4 中的 HTML 中包含或排除属性

    我正在使用 Angular 4 和 Angular 材料来构建一张桌子 我想要mat sort header有条件地添加到以下模板中
  • 类型错误:您在需要流的地方提供了无效的对象。您可以提供 Observable、Promise、Array 或 Iterable

    我在尝试着map来自服务调用但收到错误 看着subscribe 没有在 Angular 2 中定义吗 https stackoverflow com questions 41995647 subscribe is not defined i
  • 使用 Angular 2 的前端“微服务”

    我正在为一些奇怪的情况寻找解决方案 让我们快速浏览一下 angular2 seed 项目 以便我可以更好地解释 https github com mgechev angular2 seed tree master src client ap
  • Angular 7测试重试当模拟http请求无法实际重试时

    我有以下尝试使用 OAuth 的拦截器refresh token每当获得任何 401 错误 响应时 基本上 刷新令牌是在第一个 401 请求上获取的 获取后 代码会等待 2 5 秒 在大多数情况下 第二个请求不会触发错误 但如果触发错误 令
  • 在具有多级分组的 HTML 表格中显示数据

    我必须通过使用 rowspan 进行分组来显示 HTML 表中的一些数据 下面是预期的 GUI 我有如下所示的 JSON 数据 JSON数据here https jsoneditoronline org id 1014438e5489485

随机推荐

  • 从 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 这是我的路线配