Как получить параметры запроса из url в angular 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"];
    }
}

хотя вопрос указывает версию бета 7, этот вопрос также появляется в качестве главного результата поиска в Google для общих фраз, таких как угловые 2 параметра запроса. По этой причине вот ответ для новейшего маршрутизатора (в настоящее время в Альфа.7).

способ чтения параметров резко изменился. Сначала вам нужно ввести зависимость под названием Router в конструкторе параметров, таких как:

constructor(private router: Router) { }

и после этого мы можем подписаться на параметры запроса на нашем ngOnInit метод (конструктор тоже хорошо, но ngOnInit должен использоваться для тестируемости) как

this.router
  .routerState
  .queryParams
  .subscribe(params => {
    this.selectedId = +params['id'];
  });

в этом примере мы читаем запрос param id из URL-адреса, как example.com?id=41.

есть еще несколько вещей, чтобы заметить:

1. доступ к имуществу params как params['id'] всегда возвращает a строка, и это может быть преобразован в by префикс его с +.
2. причина, по которой параметры запроса извлекаются с observable, заключается в том, что он позволяет повторно использовать один и тот же экземпляр компонента вместо загрузки нового. Каждый раз, когда параметр запроса изменяется, он вызывает новое событие, на которое мы подписались, и поэтому мы можем соответствующим образом реагировать на изменения.

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

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
}

чтобы отправить запрос params

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

---

источник

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

импорт:

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

и функции:

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

обратите внимание: он не поддерживается всеми платформами и, похоже, находится в "экспериментальном" состоянии с помощью angular docs

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

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

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

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

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

вы можете получить параметры запроса при передаче в 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']));
  }

}

получить URL param в качестве объекта.

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

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

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

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

вот это:

this.activatedRoute.queryParams.subscribe((params: Params) => {
  console.log(params);
});

вы не можете получить параметр из 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);

вариация на решение Стива пола, я предпочитаю избегать ненужных Ивар, поэтому, чтобы удалить необходимость в unsubscribe() вызов ngOnDestroy, просто подпишитесь на observable с 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);
    });
  }

}

вам просто нужно ввести ActivatedRoute в конструктор, а затем просто получить доступ к парам или queryParams над ним

constructor(private route:AcitvatedRoute){}
ngOnInit(){
        this.route.queryParams.subscribe(params=>{
        let username=params['username'];
      });
 }

в некоторых случаях это не дает ничего в NgOnInit ...может быть из-за вызова init перед инициализацией параметров в этом случае вы можете добиться этого, попросив observable подождать некоторое время с помощью функции debounceTime(1000)

например=>

 constructor(private route:AcitvatedRoute){}
    ngOnInit(){
            this.route.queryParams.debounceTime(100).subscribe(params=>{
            let username=params['username'];
          });
     }

debounceTime () выдает значение из источника, наблюдаемого только после определенным промежуток времени прошел без другого источника выбросов

Я надеюсь, что это поможет кому-то еще.

вопрос выше утверждает, что значение параметра запроса необходимо после перенаправления страницы, и мы можем предположить, что значение моментального снимка (не наблюдаемая альтернатива) будет достаточным.

никто здесь не упоминал о снимке.параммап.получить от официальная документация.

this.route.snapshot.paramMap.get('id')

поэтому перед отправкой добавьте это в компонент отправки/перенаправления:

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

затем перенаправить как либо (документально здесь):

this.router.navigate(['/heroes', { id: heroId, foo: 'foo' }]);

или просто:

this.router.navigate(['/heroes', heroId ]);

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

 { path: 'hero/:id', component: HeroDetailComponent }

и, наконец, в вашем компоненте, который должен использовать запрос param

• добавить импорту (документально здесь):

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

• inject ActivatedRoute

( документации также импортирует switchMap, а также вводит маршрутизатор и HeroService - но они необходимы только для наблюдаемой альтернативы - они не нужны при использовании альтернативы snapshot, как в нашем случае ):

    constructor(
      private route: ActivatedRoute
    ) {}

• и получить значение, которое вам нужно (документально здесь):

  ngOnInit() {
    const id = this.route.snapshot.paramMap.get('id');
  }
  

ПРИМЕЧАНИЕ: ЕСЛИ ВЫ ДОБАВЛЯЕТЕ ROUTING-MODULE К ФУНКЦИОНАЛЬНОМУ МОДУЛЮ (КАК ПОКАЗАНО В ДОКУМЕНТАЦИИ), УБЕДИТЕСЬ, ЧТО В ПРИЛОЖЕНИИ.МОДУЛЬ.ts, что модуль маршрутизации приходит раньше AppRoutingModule (или другой файл с корневыми маршрутами приложений) в IMPORTS: [] . В противном случае маршруты объектов не будут найдены (так как они появятся после { path: '**', redirectTo: '/not-found'}, и вы увидите только сообщение not-found).