如何从angular2中的url获取查询参数？

问题描述

我使用angular2.0.0-beta.7。当组件在像”/path?query=value1″这样的路径上加载时，它被重定向到”/path”。为什么删除了GET参数？如何保留参数？

路由器出现错误。如果我有一条主路线

@RouteConfig([

  {

      path: '/todos/...',

      name: 'TodoMain',

      component: TodoMainComponent

  }

])

和我的孩子路线一样

@RouteConfig([

  { path: '/', component: TodoListComponent, name: 'TodoList', useAsDefault:true },

  { path: '/:id', component: TodoDetailComponent, name:'TodoDetail' }

])

我不能在TodoListComponent中获取参数。

我可以得到矩阵

params("/my/path;param1=value1;param2=value2")

但我想要经典

query params("/my/path?param1=value1&param2=value2")

最佳解决方案

角2.0最终解决方案。看来RouteParams已被弃用。改为：

import {Router, ActivatedRoute, Params} from '@angular/router';

import {OnInit, OnDestroy, Component} from '@angular/core';

@Component({...})

export class MyComponent implements OnInit, OnDestroy {

  constructor(private activatedRoute: ActivatedRoute) {}

  ngOnInit() {

    // subscribe to router event

    this.activatedRoute.params.subscribe((params: Params) => {

        let userId = params['userId'];

        console.log(userId);

      });

  }

}

如果要获取查询参数，请将this.activatedRoute.params替换为this.activatedRoute.queryParams

关于不支持的说明

@Reto和@ codef0rmer非常正确地指出，根据官方文档，unsubscribe()内部的组件onDestroy()方法在这种情况下是不必要的。这已从我的代码示例中删除。 (请参阅我需要取消订阅this教程的部分)

次佳解决方案

即使这个问题指定版本beta 7，这个问题也是谷歌搜索结果的最佳搜索结果。为此，这里是最新的路由器的答案(目前在alpha.7)。

读取参数的方式发生了巨大变化。首先你需要在你的构造函数中注入一个叫做Router的依赖关系，比如：

constructor(private router: Router) { }

之后，我们可以在ngOnInit方法上订阅查询参数(构造函数也可以，但ngOnInit应该用于可测试性)

this.router

  .routerState

  .queryParams

  .subscribe(params => {

    this.selectedId = +params['id'];

  });

在本例中，我们从URL读取查询参数，如example.com?id=41。

还有一些事情要注意：

访问params的属性，如params['id']总是返回一个字符串，可以通过+前缀将其转换为数字。
查询参数被observable提取的原因是它允许re-using是相同的组件实例，而不是加载一个新的实例。每次查询参数更改时，都会导致我们订阅的新事件，因此我们可以对相应的更改做出反应。

第三种解决方案

我非常喜欢@史蒂夫·保罗的回答，但我们可以做同样的事情，无需额外的订阅/取消订阅电话。

import { ActivatedRoute } from '@angular/router';

constructor(private activatedRoute: ActivatedRoute) {

    let params: any = this.activatedRoute.snapshot.params;

    console.log(params.id);

    // or shortcut Type Casting

    // (<any> this.activatedRoute.snapshot.params).id

}

第四种方案

当一个这样的URL这样的http://stackoverflow.com?param1=value

您可以通过以下代码获取param1：

import { Component, OnInit } from '@angular/core';

import { Router, ActivatedRoute, Params } from '@angular/router';

@Component({

    selector: '',

    templateUrl: './abc.html',

    styleUrls: ['./abc.less']

})

export class AbcComponent implements OnInit {

    constructor(private route: ActivatedRoute) { }

    ngOnInit() {

        // get param

        let param1 = this.route.snapshot.queryParams["param1"];

    }

}

第五种方案

首先，我发现使用Angular2的是具有查询字符串的url将是/path;query=value1

要使用您使用的组件访问它是这样的，但现在遵循代码块：

    constructor(params: RouteParams){

    var val = params.get("query");

    }

至于为什么在加载组件时会被删除，这不是默认行为。我特别检查了一个干净的测试项目，没有被重定向或更改。它是默认路由还是其他特殊的路由？

请阅读https://angular.io/docs/ts/latest/guide/router.html#!#query-parameters中Angular2教程中的查询字符串和参数的路由

第六种方案

您可以使用ActivatedRoute在URL中传递查询参数，如下所示：

url： – http：/domain.com？test = abc

import { Component } from '@angular/core';

import { ActivatedRoute }     from '@angular/router';

@Component({

  selector: 'my-home'

})

export class HomeComponent {

  constructor(private sharedServices : SharedService,private route: ActivatedRoute) {

    route.queryParams.subscribe(

      data => console.log('queryParams', data['test']));

  }

}

第七种方案

嗨，你可以使用URLSearchParams，你可以阅读更多关于它的here。

进口：

import {URLSearchParams} from "@angular/http";

功能：

getParam(){

  let params = new URLSearchParams(window.location.search);

  let someParam = params.get('someParam');

  return someParam;

}

注意：它不受所有平台的支持，似乎在”EXPERIMENTAL”状态由角度文档

阅读原文

angular2 学习资料

How to Build Nested Model-driven Forms in Angular 2