Я использую Angular 5.0.3, я хотел бы запустить свое приложение с кучей параметров запроса, как /app?param1=hallo¶m2=123
. Каждый совет дан в Как получить параметры запроса из URL в Angular 2? не работает для меня.
Есть идеи, как заставить работать параметры запроса?
private getQueryParameter(key: string): string {
const parameters = new URLSearchParams(window.location.search);
return parameters.get(key);
}
Эта приватная функция помогает мне получить параметры, но я не думаю, что это правильный путь в новой среде Angular.
[обновление:] мое основное приложение выглядит
@Component({...})
export class AppComponent implements OnInit {
constructor(private route: ActivatedRoute) {}
ngOnInit(): void {
// would like to get query parameters here...
// this.route...
}
}
Ответы:
В Angular 5 доступ к параметрам запроса осуществляется путем подписки на
this.route.queryParams
.Пример:
/app?param1=hallo¶m2=123
в то время как переменные пути доступны
this.route.snapshot.params
Пример:
/param1/:param1/param2/:param2
источник
Это самое чистое решение для меня
источник
Я знаю, что OP попросил решение для Angular 5, но все же для всех, кто сталкивается с этим вопросом для более новых (6+) версий Angular. Ссылаясь на документы , касающиеся ActivatedRoute.queryParams (на которых основано большинство других ответов):
Согласно Документам , простой способ получить параметры запроса будет выглядеть следующим образом:
Для более продвинутых способов (например, расширенное повторное использование компонентов) см. Эту главу Документов.
РЕДАКТИРОВАТЬ:
Как правильно указано в комментариях ниже, этот ответ неверен - по крайней мере, для случая, указанного в OP.
OP запрашивает глобальные параметры запроса (/ app? Param1 = hallo & param2 = 123); в этом случае вы должны использовать queryParamMap (как в ответе @ dapperdan1985).
paramMap, с другой стороны, используется для параметров, специфичных для маршрута (например, / app /: param1 /: param2, в результате получается / app / hallo / 123).
Спасибо @JasonRoyle и @daka за указание на это.
источник
queryParamMap
неparamMap
получить параметры строки запроса?paramMap
не работает.Вы также можете использовать HttpParams , например:
источник
path: '', redirectTo: '/list'
. This.route.snapshot не работает для меня, потому что он redirectTo / list, который исключает 'lang' queryString. Но это решение работает для меня.ОБНОВИТЬ
источник
его работа для меня:
посмотрите больше вариантов Как получить параметры запроса из URL в angular2?
источник
Параметры запроса и пути (угловой 8)
Для URL, например, https://myapp.com/user/666/read?age=23 используйте
ОБНОВИТЬ
В случае, если вы используете
this.router.navigate([someUrl]);
и параметры вашего запроса встроены вsomeUrl
строку, то angular кодирует URL, и вы получаете что-то вроде этого https://myapp.com/user/666/read%3Fage%323 - и выше решение даст неправильный результат ( queryParams будет пустым, и параметры пути могут быть приклеены к последнему параметру пути, если он находится в конце пути). В этом случае измените способ навигации на этотисточник
Наткнулся на этот вопрос, когда искал похожее решение, но мне не нужно ничего, как полная маршрутизация на уровне приложения или дополнительные импортированные модули.
Следующий код отлично подходит для моего использования и не требует дополнительных модулей или импорта.
http://localhost:4200/?param1=hello¶m2=123
выходы:источник
Angular Router предоставляет метод parseUrl (url: string), который анализирует url в UrlTree . Одним из свойств UrlTree являются queryParams. Таким образом, вы можете сделать что-то вроде:
источник
К сожалению, самое чистое решение - не самое расширяемое решение. В последних версиях Angular предлагается в других ответах, что вы можете легко получить параметры запроса, используя ActivatedRoute Injectible и, в частности, используя любое из свойств снимка:
или свойство подписки (используется в случаях, когда строка запроса будет обновляться, например, при переходе по идентификаторам пользователя):
Я здесь, чтобы сказать вам, что у этих решений есть существенный недостаток, который не был решен в течение некоторого времени: https://github.com/angular/angular/issues/12157
В общем, единственное пуленепробиваемое решение - использовать старый добрый ванильный javascript. В этом случае я создал сервис для манипулирования URL:
источник
Когда у вас есть пустой объект маршрута, это в основном связано с тем, что вы не используете router-outlet в вашем app.component.html.
Без этого вы не сможете получить значимый объект маршрута с непустыми субобъектами, особенно params & queryParams.
Попробуйте добавить
<router-outlet><router-outlet>
прямо перед вызовом<app-main-component></app-main-component>
Перед этим убедитесь, что у вас есть готовый параметр запроса в app-routing>, который экспортирует класс Route, используемый компонентом App:
Последнее, конечно, чтобы получить ваш параметр, я лично использую,
this.route.snapshot.params.dynamicParam
где dynamicParam - это имя, используемое в вашем компоненте маршрутизации приложений :)источник
Будьте осторожны с вашими маршрутами. «RedirectTo» удалит | удалит любой параметр запроса.
Я вызвал мой основной компонент с параметрами запроса, такими как "/ main? Param1 = a & param2 = b, и предположил, что мои параметры запроса поступают в метод" ngOnInit () "в главном компоненте, прежде чем перенаправление перенаправления вступит в силу.
Но это неправильно. Перенаправление произойдет раньше, удалит параметры запроса и вызовет метод ngOnInit () в главном компоненте без параметров запроса.
Я изменил третью линию моих маршрутов на
и теперь мои параметры запроса доступны в основных компонентах ngOnInit, а также в PageOneComponent.
источник
Найдено в: Родительские компоненты получают пустые параметры из ActivatedRoute
Работал для меня:
источник
Просто наткнулся на ту же проблему, и большинство ответов здесь, кажется, решают ее только для внутренней угловой маршрутизации, а затем некоторые из них для параметров маршрута, которые не совпадают с параметрами запроса.
Я предполагаю, что у меня есть вариант использования, аналогичный исходному вопросу Ларса.
Для меня вариант использования, например, отслеживание рефералов:
Angular работает
mycoolpage.com
, с хеш-маршрутизацией, поэтомуmycoolpage.com
перенаправляет наmycoolpage.com/#/
. Однако для реферальной ссылки такая ссылка такжеmycoolpage.com?referrer=foo
должна быть пригодной для использования. К сожалению, Angular немедленно удаляет параметры запроса, переходя непосредственно кmycoolpage.com/#/
.Любой трюк с использованием пустого компонента + AuthGuard и получением
queryParams
илиqueryParamMap
, к сожалению, не работает для меня. Они всегда были пустыми.Мое хакерское решение в конечном итоге заключалось в том, чтобы обрабатывать это в небольшом скрипте, в
index.html
котором можно получить полный URL с параметрами запроса. Затем я получаю значение параметра запроса с помощью строковых манипуляций и устанавливаю его в объекте окна. Затем отдельный сервис обрабатывает получение идентификатора из объекта окна.скрипт index.html
обслуживание
источник
источник
HTTP: // локальный: 4200 / продукты заказ = популярный
Мы можем получить доступ к параметру запроса заказа следующим образом:
Также существует queryParamMap, который возвращает наблюдаемое с объектом paramMap.
Учитывая следующий URL-адрес маршрута:
HTTP: // локальный: 4200 / продукты заказ = популярный & фильтр = новый
Источник - https://alligator.io/angular/query-parameters/
источник
Я думаю, что Angular 8:
ActivatedRoute.params
был заменен наActivatedRoute.paramMap
ActivatedRoute.queryParams
был заменен наActivatedRoute.queryParamMap
источник
источник
Если вы не используете Angular router, попробуйте запросить строку . Установить его
к вашему проекту. В вашем компоненте сделать что-то вроде этого
Это
substring(1)
необходимо, потому что если у вас есть что-то вроде этого,'/mypage?foo=bar'
то имя ключа для будет?foo
источник