Angular2 router keep query string

Question

Я написал приложение 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 

есть ли способ, что я могу настроить -й e router, чтобы сохранить начальную строку запроса при навигации?

Благодарит вас
Lukas

Answer 1

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

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

• preserveQueryParams и
• preserveFragment

Вы можете добавить охранник пустого маршрут пути, где в караульном навигации до /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

Answer 2

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

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

Answer 3

ответ Гюнтера Zöchbauer должны работать должным образом, но, по некоторым причинам, он не работает для меня вообще. То, что в конечном итоге работало, передавало queryParams напрямую, а не «сохраняло» их.

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

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

Answer 4

захвата оригинальный URL-адрес в -BASE href-

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

тогда будет presist

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

Answer 5

Если вы используете HTML templ съела, то вы можете использовать

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

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

Answer 6

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

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

Например:

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