Как получить параметры запроса от URL в Angular 2?

Я использую 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")

Инъекцией экземпляра ActivatedRouteможно подписаться на различные наблюдаемые, включая a queryParamsи paramsobservable:

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

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

  constructor(private activatedRoute: ActivatedRoute) {}

  ngOnInit() {
    // Note: Below 'queryParams' can be replaced with 'params' depending on your requirements
    this.activatedRoute.queryParams.subscribe(params => {
        const userId = params['userId'];
        console.log(userId);
      });
  }

}

ПРИМЕЧАНИЕ по поводу неподписки

@Reto и @ codef0rmer совершенно справедливо отметили, что, согласно официальным документам, метод unsubscribe()внутренних компонентов onDestroy()в этом случае не нужен. Это было удалено из моего примера кода. (см. синее окно предупреждения в этом уроке)

Когда 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'];
  });

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

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

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

Мне очень понравился ответ @ 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
}

Для отправки параметров запроса

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;
}

Примечание : он поддерживается не всеми платформами и, похоже, находится в состоянии «ЭКСПЕРИМЕНТАЛЬНО» по угловым документам

Прежде всего, я нашел работу с 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.

Вы можете получить параметры запроса при передаче в 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-параметр как объект.

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

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

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

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

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

Никто здесь не упомянул о snapshot.paramMap.get из официальной документации .

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 }

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

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

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

• ввести ActivatedRoute

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

    constructor(
      private route: ActivatedRoute
    ) {}

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

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

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

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

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

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

например =>

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

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

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

Запрос и путь (Angular 8)

Если у вас есть URL, например https://myapp.com/owner/123/show?height=23, используйте

combineLatest( [this.route.paramMap, this.route.queryParamMap] )
  .subscribe( ([pathParams, queryParams]) => {
    let ownerId = pathParams.get('ownerId');    // =123
    let height  = queryParams.get('height');    // =height
    // ...
  })

ОБНОВИТЬ

В случае, если вы используете this.router.navigate([yourUrl]);и параметры вашего запроса встроены в yourUrlстроку, то angular кодирует URL, и вы получаете что-то вроде этого https://myapp.com/owner/123/show%3Fheight%323 - и выше решение даст неправильный результат ( queryParams будет пустым, и параметры запроса могут быть приклеены к последнему параметру пути, если он находится в конце пути). В этом случае измените способ навигации на этот

this.router.navigateByUrl(yourUrl);