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

Я использую angular 5.0.3, я хотел бы запустить свое приложение с кучей параметров запроса. например "/app? param1 = hallo & param2 = 123". Каждый совет, указанный в Как получить параметры запроса из URL-адреса в angular2?, не работает для меня.

Любые идеи о том, как получить параметры запроса?

private getQueryParameter(key: string): string {
  const parameters = new URLSearchParams(window.location.search);
  return parameters.get(key);
}

Эта частная функция помогает мне получить мои параметры, но я не думаю, что это правильный путь в новой среде angular.

[Обновление:] Мое главное приложение выглядит   @Компонент({...})   класс экспорта AppComponent реализует OnInit {

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    // would like to get query parameters here...
    // this.route...
  }
}

ОТВЕТЫ

Ответ 1

В Angular 5 доступ к параметрам запроса осуществляется путем подписки на this.route.queryParams.

Пример: "/app? param1 = hallo & param2 = 123" 

param1: string;
param2: string;
constructor(private route: ActivatedRoute) {
    console.log('Called Constructor');
    this.route.queryParams.subscribe(params => {
        this.param1 = params['param1'];
        this.param2 = params['param2'];
    });
}

тогда как переменные пути получают доступ к "this.route.snapshot.params"

Пример: "/param1/: param1/param2/: param2" 

param1: string;
param2: string;
constructor(private route: ActivatedRoute) {
    this.param1 = this.route.snapshot.params.param1;
    this.param2 = this.route.snapshot.params.param2;
}

Ответ 2

Это самое чистое решение для меня

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

export class MyComponent {
  constructor(
    private route: ActivatedRoute
  ) {}

  ngOnInit() {
    const firstParam: string = this.route.snapshot.queryParamMap.get('firstParamKey');
    const secondParam: string = this.route.snapshot.queryParamMap.get('secondParamKey');
  }
}

Ответ 3

Я знаю, что OP попросил решение Angular 5, но все же для всех вас, кто сталкивается с этим вопросом для более новых (6+) версий Angular. Ссылаясь на Документы, касающиеся ActivatedRoute.queryParams (на которых основано большинство других ответов):

Два старых свойства все еще доступны. Они менее способны, чем их замена не приветствуется и может быть признана устаревшей в будущем Угловая версия.

params - Observable, который содержит обязательные и необязательные параметры, специфичные для маршрута. Вместо этого используйте paramMap.

queryParams - Observable, который содержит доступные параметры запроса на все маршруты. Вместо этого используйте queryParamMap.

Согласно Документам, простой способ получить параметры запроса будет выглядеть следующим образом:

constructor(private route: ActivatedRoute) { }

ngOnInit() {
    this.param1 = this.route.snapshot.paramMap.get('param1');
    this.param2 = this.route.snapshot.paramMap.get('param2');
}

Подробнее о более сложных способах (например, повторном использовании компонентов) см. эту главу Документов.

EDIT:

Как правильно указано в комментариях ниже, этот ответ неверен - по крайней мере, для случая, указанного в OP.

OP запрашивает глобальные параметры запроса (/app? Param1 = hallo & param2 = 123); в этом случае вы должны использовать queryParamMap (как в ответе @dapperdan1985).

С другой стороны, paramMap используется для параметров, специфичных для маршрута (например,/app/: param1/: param2, что приводит к /app/hallo/123).

Спасибо @JasonRoyle и @daka за указание на это.

Ответ 4

Вы также можете использовать HttpParams, например:

  getParamValueQueryString( paramName ) {
    const url = window.location.href;
    let paramValue;
    if (url.includes('?')) {
      const httpParams = new HttpParams({ fromString: url.split('?')[1] });
      paramValue = httpParams.get(paramName);
    }
    return paramValue;
  }

Ответ 5

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

constructor(private route: ActivatedRoute) {}

ngOnInit() {
    console.log(this.route.snapshot.queryParamMap);
}

UPDATE

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

export class LoginComponent {
    constructor(private router: Router) {
        const snapshot: RouterStateSnapshot = router.routerState.snapshot;
        console.log(snapshot);  // <-- hope it helps
    }
}

Ответ 7

Наткнулся на этот вопрос, когда я искал аналогичное решение, но мне не нужно было ничего, как полная маршрутизация уровня приложения или более импортированные модули.

Следующий код отлично подходит для моего использования и не требует дополнительных модулей или импорта.

  GetParam(name){
    const results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
    if(!results){
      return 0;
    }
    return results[1] || 0;
  }

  PrintParams() {
    console.log('param1 = ' + this.GetParam('param1'));
    console.log('param2 = ' + this.GetParam('param2'));
  }

http://localhost:4200/?param1=hello&param2=123 выходов:

param1 = hello
param2 = 123

Ответ 8

Если у вас есть пустой объект маршрута, это связано главным образом с тем, что вы не используете маршрутизатор-выход в вашем app.component.html.

Без этого вы не сможете получить значимый объект маршрута с непустыми вспомогательными объектами, в частности params и queryParams.

Попробуйте добавить <router-outlet><router-outlet> непосредственно перед вызовом <app-main-component></app-main-component>

До этого убедитесь, что у вас есть готовый параметр запроса в app-routing > , который экспортирует класс Route, используемый компонентом App:

param: '/param/:dynamicParam', path: MyMainComponent

Последнее, конечно, чтобы получить ваш параметр, я использую this.route.snapshot.params.dynamicParam, где dynamicParam - это имя, используемое в вашем компоненте приложения-маршрутизации:)

Ответ 9

Будьте осторожны с вашими маршрутами. "RedirectTo" удалит | отбросит любой параметр запроса.

const appRoutes: Routes [
 {path: "one", component: PageOneComponent},
 {path: "two", component: PageTwoComponent},
 {path: "", redirectTo: "/one", pathMatch: full},
 {path: "**", redirectTo: "/two"}
]

Я назвал свой основной компонент параметрами запроса, такими как "/main? param1 = a & param2 = b, и предположим, что мои параметры запроса поступают в метод" ngOnInit() "в основном компоненте до того, как перенаправление пересылки вступит в силу.

Но это неправильно. Перенаправление будет раньше, отбросьте параметры запроса и вызовите метод ngOnInit() в основном компоненте без параметров запроса.

Я изменил третью строку моих маршрутов на

{path: "", component: PageOneComponent},

и теперь мои параметры запроса доступны в основных компонентах ngOnInit, а также в компоненте PageOneComponent.

Ответ 10

Найдено в: Родительские компоненты получают пустые Params из ActivatedRoute

Работал для меня:

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

@Component({
  selector: 'app-navigation-bar',
  templateUrl: './navigation-bar.component.html',
  styleUrls: ['./navigation-bar.component.scss']
})
export class NavigationBarComponent implements OnInit, OnDestroy {
  private sub: any;
  constructor(private route: ActivatedRoute, private router: Router) {}

  ngOnInit() {
    this.sub = this.router.events.subscribe(val => {
      if (val instanceof RoutesRecognized) {
        console.log(val.state.root.firstChild.params);
      }
    });
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }

}

Ответ 11

Просто наткнулся на ту же проблему, и большинство ответов здесь, кажется, решают ее только для внутренней angular маршрутизации, а затем некоторые из них для параметров маршрута, которые не совпадают с параметрами запроса.

Я предполагаю, что у меня есть вариант использования, аналогичный исходному вопросу Ларса.

Для меня вариант использования, например, отслеживание рефералов:

Угловая работа на mycoolpage.com с хэш-маршрутизацией, поэтому mycoolpage.com перенаправляет на mycoolpage.com/#/. Однако для реферальной ссылки такая ссылка, как mycoolpage.com?referrer=foo, также должна использоваться. К сожалению, Angular немедленно удаляет параметры запроса, переходя непосредственно к mycoolpage.com/#/.

Любые "хитрости" с использованием пустого компонента + AuthGuard и получением queryParams или queryParamMap, к сожалению, не спомогли мне. Они всегда были пустыми.

Мое хакерское решение в итоге заключалось в том, чтобы обрабатывать это в небольшом скрипте в index.html, который получает полный URL, с параметрами запроса. Затем я получаю значение параметра запроса с помощью строковых манипуляций и устанавливаю его в объекте окна. Затем отдельный сервис обрабатывает получение идентификатора из объекта окна.

скрипт index.html

const paramIndex = window.location.href.indexOf('referrer=');
if (!window.myRef && paramIndex > 0) {
  let param = window.location.href.substring(paramIndex);
  param = param.split('&')[0];
  param = param.substr(param.indexOf('=')+1);
  window.myRef = param;
}

служба

declare var window: any;

@Injectable()
export class ReferrerService {

  getReferrerId() {
    if (window.myRef) {
      return window.myRef;
    }
    return null;
  }
}

Ответ 12

Если вы не используете Угловой маршрутизатор, попробуйте, querystring. Установите его

npm install --save querystring

к вашему проекту. В вашем компоненте сделайте что-то вроде этого

import * as qs from 'querystring';
...
ngOnInit() {
   const params = qs.parse(window.location.search.substring(1));
   ...
}

substring(1) необходима, потому что если у вас есть что-то вроде этой '/mypage?foo=bar' тогда ключевое имя будет ?foo