Angular2 строка запроса router keep

Я написал приложение Angular2 (v2.0.1), использующее маршрутизатор. На веб-сайте загружаются несколько параметров строки запроса, поэтому полный URL-адрес сначала выглядит следующим образом:

https://my.application.com/?param1=val1&param2=val2&param3=val3

В моей конфигурации маршрута у меня есть запись, которая перенаправляет пустой маршрут:

const appRoutes: Routes = [
    {
        path: '',
        redirectTo: '/comp1',
        pathMatch: 'full'
    },
    {
        path: 'comp1',
        component: FirstComponent
    },
    {
        path: 'comp2',
        component: SecondComponent
    }
];

Моя проблема в том, что после того, как приложение было загружено, URL-адрес больше не содержит параметров запроса, а выглядит следующим образом:

https://my.application.com/comp1

Есть ли способ настроить маршрутизатор так, чтобы он сохранял исходную строку запроса при навигации?

Спасибо, Lukas

Ответ 1

Я не думаю, что есть способ определить это в конфигурации маршрутов.

В настоящее время он поддерживается для routerLink и обязательной навигации для включения

Вы можете добавить охрану на пустую траекторию маршрута, где в защитной навигации маршрут /comp1 сделан.

router.navigate(['/comp1'], { preserveQueryParams: true });//deprecated see update note
router.navigate(['/comp1'], { queryParamsHandling: "merge" });

Существует PR, чтобы настроить preserveQueryParams глобально.

Заметка обновления: от https://angular.io/api/router/NavigationExtras, preserveQueryParams устарел, вместо этого используйте queryParamsHandling

Ответ 2

Если вы используете HTML-шаблон, вы можете использовать

<a [routerLink]="['/page-2']" [routerLinkActive]="['is-active']" queryParamsHandling="merge">

Что-то, на что нужно обратить внимание, заключается в том, что параметр queryParamsHandling не имеет квадратных скобок.

Ответ 3

Ответ Günter Zöchbauer должен работать правильно, но по какой-то причине он не работает для меня вообще. То, что в конечном итоге работало, передавало queryParams напрямую, а не "сохраняло" их.

Вот как выглядит мой страж:

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    (...)
    this.router.navigate(['login'], { queryParams: route.queryParams });
}

Ответ 4

Возможно, вы захотите выполнить поиск https://github.com/angular/angular/issues для подобного запроса. Если их не существует, отправьте запрос функции.

В то же время: я считаю, что вам нужно будет создать компонент на пути: '', с единственной целью затем перенаправить на '/comp1', сохраняя параметры QueryString.

Ответ 5

захватить исходный url в -base href -

https://example.com/order?id=123

то он будет выдавать

https://example.com/order?id=123#/product

Ответ 6

Если вы используете HTML-шаблон, вы также можете использовать preserveQueryParams="true"

Обратите внимание, что preserveQueryParams не имеет квадратной скобки.

Например:

<a [routerLink]="['/navigate-to']" preserveQueryParams="true">