Сохранение второстепенных маршрутов при навигации в угловом главном выходе

У меня следующий маршрут.

http://localhost:4100/example/5b8c94cfc5f85728db8bddf2/5bb426434722020c569fc5d8/(p1:....//p2:....//p3:...)

У меня есть 3 второстепенных маршрута, у меня проблема, когда я делаю следующее

this.router.navigate ([<any path>], {relativeTo: this.route})

, плыву в основной отвод, а вот второстепенные отводы р1, р2, р3 не сохранились

Есть ли что-то равное saveQueryParams? , навигационные дополнения? https://angular.io/api/router/NavigationExtras, но для второстепенных маршрутов?


angular angular7 angular6 angular-router
person Kevin AB    schedule 31.10.2018    source источник
comment
Это то, что вы хотите? https://angular.io/api/common/http/HttpParams И если вы хотите сделать вторичный или третий сегмент работают правильно, вам нужно будет правильно его настроить. например путь: 'пример /: идентификатор'   -  person wannadream    schedule 01.11.2018
comment
Я не понимаю... то, что я хочу сохранить, это второстепенные маршруты. blog.angularindepth.com/   -  person Kevin AB    schedule 01.11.2018
comment
Хорошо, автор приложил пример: stackblitz.com/edit/secondary-segments-demo. Вы его уже изучаете?   -  person wannadream    schedule 01.11.2018
comment
Вы нашли ответ? Потому что я столкнулся с той же проблемой. :(   -  person manymanymore    schedule 01.06.2020

Ответы (1)


arrow_upward
2
arrow_downward

Я также столкнулся с той же проблемой. К сожалению, в настоящее время (все еще) не существует готового решения для этого.

В итоге я немного поработал: получил вторичные (вспомогательные) маршруты из URL-адреса и добавил их в функцию навигации.

У меня был только один вторичный маршрут с именем popup, поэтому я создал регулярное выражение, чтобы получить путь к выходу всплывающего маршрутизатора: const POPUP_ROUTE_FROM_URL_REGEX = /\(popup:([^)]+)\)/.

Затем я получил путь из URL: const popupRouteResult= POPUP_ROUTE_FROM_URL_REGEX.exec(this.router.url). (this.router вставляется в конструктор: private router: Router.) Функция exec возвращает массив, где первый элемент является полным совпадением регулярного выражения (так (в данном случае (popup:‹path...›)), а после этого подстрока соответствует (так что в данном случае это только один: ‹path...›), поэтому путь всплывающего маршрута находится в popupRouteResult[1].

В функции навигации вы можете использовать ее следующим образом:

this.router.navigate(
    [
        <some path>,
        {
            outlets: {
            // the line below ensures that the (possibly present) popup route is preserved when navigating
                ...(!!popupRouteResult&& { popup: popupRouteResult[1] }),
            },
        },
    ]                
);

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

const SECONDARY_ROUTES_FROM_URL_REGEX = /\(([^)]+)\)/;
const secondaryRoutesResult = SECONDARY_ROUTES_FROM_URL_REGEX .exec(this.router.url);

Например, в вопросе secondaryRoutesResult[1] вы получите "p1: .... // p2: .... // p3: ...".

Вы можете разделить эту строку на //, чтобы получить каждый отдельный выходной путь: const outlets = secondaryRoutesResult[1].split('//), which will result in: [p1: ...., p2: ...., p3]`. Вероятно, разумно сначала проверить, существует ли secondRoutesResult[1].

Затем вы можете перебрать розетки:

const outletsData = {outlets: {}};
outlets.forEach(outlet => {
   // split by : to get the name of the outlet and the path separated
   const splitOutlet = outlet.split(":");
   const name = splitOutlet[0];
   const path = splitOutlet[1];
   outletsData[name] = path
});

И вы можете использовать эти данные в своей функции навигации:

this.router.navigate([<some path>, outletsData]);

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

person Emmy    schedule 19.02.2021