Как получить параметры запроса из url в angular2?

Ответ 1

Angular 2.0 FINAL. Кажется, что RouteParams устарели. Вместо этого попробуйте:

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

@Component({...})
export class MyComponent implements OnInit {

  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() не нужен. Это было удалено из моего кода. (см. раздел Мне нужно отписаться? раздела этот учебник)

Ответ 2

Когда такой 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"];
    }
}

Ответ 3

Несмотря на то, что вопрос задает версию бета-версии 7, этот вопрос также появляется в качестве верхнего результата поиска в Google для обычных фраз, таких как параметры запроса angular 2. По этой причине здесь приведен ответ для новейшего маршрутизатора (в настоящее время в 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'], всегда возвращает строку, и это можно преобразовать в число, префиксное с помощью +.
• Причина, по которой параметры запроса извлекаются с помощью наблюдаемого, заключается в том, что он позволяет повторно использовать один и тот же экземпляр компонента вместо загрузки нового. Каждый раз, когда изменяется параметр запроса, это приведет к появлению нового события, на которое мы подписаны, и поэтому мы можем реагировать на изменения соответственно.

Ответ 4

Мне очень понравился ответ @StevePaul, но мы можем сделать то же самое без посторонней подписки/отмены подписки.

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
}

Ответ 5

Привет, вы можете использовать URLSearchParams, вы можете прочитать об этом здесь.

импорт:

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

и функция:

getParam(){
  let params = new URLSearchParams(window.location.search);
  let someParam = params.get('someParam');
  return someParam;
}

Примечание. Он не поддерживается всеми платформами и, кажется, находится в состоянии "ЭКСПЕРИМЕНТАЛЬНОЕ" по angular docs

Ответ 6

Чтобы отправить параметры запроса

import { Router } from '@angular/router';
this.router.navigate([ '/your-route' ], { queryParams: { key: va1, keyN: valN } });

Получить параметры запроса

import { ActivatedRoute } from '@angular/router';
this.activatedRoute.queryParams.subscribe(params => {
    let value_1 = params['key'];
    let value_N = params['keyN'];
});

Официальный источник

Ответ 7

Во-первых, я нашел, что работа с Angular2 заключается в том, что URL-адрес с строкой запроса будет /path;query=value1

Чтобы получить доступ к нему в компоненте, который вы используете Так и есть, но теперь следует блок кода:

    constructor(params: RouteParams){
    var val = params.get("query");
    }

Что касается того, почему он будет удален при загрузке компонента, это не поведение по умолчанию. Я специально проверил в чистом тестовом проекте и не был перенаправлен или изменен. Это маршрут по умолчанию или что-то еще особенное в маршрутизации?

Прочитайте о маршрутизации с строками запроса и параметрами в учебнике Angular2 в https://angular.io/docs/ts/latest/guide/router.html#!#query-parameters

Ответ 8

Вы можете получить параметры запроса при передаче по URL-адресу с помощью ActivatedRoute, как указано ниже: -

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']));
  }

}

Ответ 9

Получить URL-адрес как объект.

import { Router } from '@angular/router';
constructor(private router: Router) {
    console.log(router.parseUrl(router.url));
}

Ответ 10

Если вы хотите только один раз получить параметр запроса, лучше всего использовать метод take, поэтому вам не нужно беспокоиться о запрете подписки. Вот простой фрагмент: -

constructor(private route: ActivatedRoute) {
  route.snapshot.queryParamMap.take(1).subscribe(params => {
     let category = params.get('category')
     console.log(category);
  })
}

Примечание. Удалите take (1), если вы хотите использовать значения параметров в будущем.

Ответ 11

Вы не можете получить параметр из RouterState, если он не определен в маршруте, поэтому в вашем примере вам нужно проанализировать запрос...

Вот код, который я использовал:

let re = /[?&]([^=#&]+)=([^&#]*)/g;
let match;
let isMatch = true;
let matches = [];
while (isMatch) {
    match = re.exec(window.location.href);
    if (match !== null) {
        matches[decodeURIComponent(match[1])] = decodeURIComponent(match[2]);
        if (match.index === re.lastIndex) {
            re.lastIndex++;
        }
    }
    else {
        isMatch = false;
    }
}
console.log(matches);

Ответ 12

Вариант решения Steve Paul, я предпочитаю избегать ненужных ivars, поэтому для устранения необходимости вызова unsubscribe() во время ngOnDestroy просто подпишитесь на наблюдаемое с помощью take(1), и он будет автоматически выпущен после первое значение - предотвращение утечек памяти

import 'rxjs/add/operator/take';
import {Router, ActivatedRoute} from '@angular/router';

@Component({...})
export class MyComponent implements OnInit {

  constructor(private activatedRoute: ActivatedRoute) {
    this.activatedRoute.params.take(1).subscribe((params: any) => {
      let userId = params['userId'];
      console.log(userId);
    });
  }

}