Объявление нескольких параметров маршрута для одного сегмента

Question

Переходя прямо к проблеме.Есть ли способ объявить несколько параметров маршрута для одного сегмента, например, маршрут ниже:

Маршруты:

{
    path: 'planlist/:departure_:destination/:date',
    component: ReservationComponent
},

В ReservationComponent :

import { ActivatedRoute } from '@angular/router';
/* ... */
console.log(this.route.snapshot.params)

/* Output */
{
    "departure_:destination": "tokyo_newyork",
    "date": "2019-09-27"
}

Мои ожидания для вывода:

/* Output */
{
    "departure": "tokyo",
    "destination": "newyork",
    "date": "2019-09-27"
}

Есть ли какое-либо решение для этой проблемы?

Answer 1

Да, вы можете.Вы можете сделать это с помощью функции queryParams.

Для этого вам необходимо исправить путь к:

path: 'planlist',

Все переменные в объекте queryParams отправляются следующим образом:

router.navigate(['planlist'], { queryParams: { departure, destination, date } });

И поймать их так:

 this.route
     .queryParamMap
         .pipe(
             map(params => params.getAll()  || [])
         ).subscribe((params) => {
             if (!!params.length) {
                 this.planlistVars= params;
             }
         }).unsubscribe();

Ключ queryParamMap , вы можете искать больше в Google или на официальном сайте angular.https://angular.io/api/router/ParamMap

Answer 2

Да, вы можете.Первое, что вам нужно исправить, это способ захвата переменных с помощью пути: Вы получили:

path: 'planlist/:departure_:destination/:date',

Правильный путь:

path: 'planlist/:departure/:destination/:date',

Второе, что вынужно сделать, это вызвать метод следующим образом:

router.navigate(['planlist', departure, destination, date]);

и захватить значение переменных:

const departure= this.route.snapshot.params['departure'];
const destination= this.route.snapshot.params['destination'];
const date= this.route.snapshot.params['date'];

Answer 3

Просто небольшая проблема в вашем маршруте.Измените его следующим образом:

{
    path: 'planlist/:departure/:destination/:date',
    component: ReservationComponent
}

Если вы маршрутизируете из TS,

this.router.navigate(['planlist', departure, destination, date]);

Или из HTML,

routerLink="/planlist/{{departure}}/{{destination}}/{{date}}"