Angular: маршрутизация к вспомогательным маршрутам с дочерними элементами маршрута

В моем приложении я хочу иметь маршрут по умолчанию для моего дочернего маршрута, который, если задано experiments/1, маршрутизатор будет направлять на experiments/1(browsePanel:overview)

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

{
    path: 'team/:id',
    children: [
      { path: '', pathMatch: 'full', redirectTo: 'list' },
      { path: 'list', component: TeamListComponent,
        children: [
       { path: '', pathMatch: 'full', redirectTo: 'default' },
       { path: 'default', component: DefaultComponent }
        ]
      },
      { path: '', pathMatch: 'full', redirectTo: 'details' outlet: 'aux' }
    ]
  }

Их код сложнее того, что я пытаюсь сделать, но по какой-то причине я получаю такую ​​ошибку: "Invalid configuration of route 'experiments/:id/': a componentless route cannot have a named outlet set"

Вот мой код:

 { path: "experiments/:id", component: BrowseExperimentsComponent , children:[
        {path: '', redirectTo: 'overview', pathMatch: 'full', outlet:'browsePanel'},
        {path:'overview',component: BrowseOverviewComponent, outlet: 'browsePanel', resolve:{project:ProjectResolverService}},
        {path:':id', component: ExperimentDetail, outlet: 'browsePanel',resolve: {experiment: ExperimentResolverService}}]
},

Предполагая, что их код является функциональным и хорошим подходом, я не понимаю, почему я получаю эту ошибку из-за наличия выхода в безкомпонентном маршруте. Я удалил «выход: 'browsePanel'» и убрал ошибку, но она не будет перенаправлена ​​на дочерний элемент при предоставлении «экспериментов / 1»

Если я не могу поместить розетку в свой путь перенаправления, как мне перейти к вспомогательному маршруту? Спасибо

ОБНОВЛЕНИЕ

После использования подхода @Davide Perozzi исправлено перенаправление на выход для маршрута, эксперименты без идентификатора.

{ path: "experiments/:idLab", component: BrowseExperimentsComponent , children:[ // for navigating via url
        {path: '', pathMatch: 'full', redirectTo: '/experiments/:idLab/(browsePanel:overview)' },
        {path:'overview',component: BrowseOverviewComponent, outlet: 'browsePanel', resolve:{project:ProjectResolverService}},
        {path:':id', component: ExperimentDetail, outlet: 'browsePanel',resolve: {experiment: ExperimentResolverService}}],
        canActivate: [SubRouteGuardService]
    },
    { path: "experiments", component: BrowseExperimentsComponent , children:[ 
        {path: '', pathMatch: 'full', redirectTo: '/experiments/(browsePanel:overview)' },
        {path:'overview',component: BrowseOverviewComponent, outlet: 'browsePanel', resolve:{project:ProjectResolverService}},
        {path:':id', component: ExperimentDetail, outlet: 'browsePanel',resolve: {experiment: ExperimentResolverService}}],
        canActivate: [SubRouteGuardService]
    }

Проблема связана с маршрутом "эксперименты /: idLab". Похоже, что он не распознает идентификатор правильно, и если я перейду к URL-адресу, подобному этому "/ эксперименты / 1", это приведет к следующему исключению:

Uncaught (in promise): Error: Cannot redirect to '/experiments/:id/(browsePanel:overview)'. Cannot find ':idLab'. Error: Cannot redirect to '/experiments/:idLab/(browsePanel:overview)'. Cannot find ':idLab'

Когда я перехожу к полному списку, например, «tests / 1 / (browsePanel: 23)», маршрут разрешается на правильный выход, и компонент загружается, но я получаю это исключение:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'experiments'
Error: Cannot match any routes. URL Segment: 'experiments'

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

Мне трудно понять, что не так с тем, что я делаю с маршрутом с идентификатором.


navigation angular router router-outlet
person Erik R    schedule 29.09.2017    source источник
comment
Слишком поздно, но у меня та же проблема, и я не могу найти решение. Вы нашли способ?   -  person Davide Perozzi    schedule 19.02.2018
comment
К сожалению, нет, до сих пор не знаю, как получить перенаправление на розетку.   -  person Erik R    schedule 19.02.2018
comment
Я обнаружил много проблем, но, похоже, ни одно из решений у меня не работает, и я использую последнюю версию angular. В настоящее время пытается использовать Guard для ручного перенаправления на первый дочерний маршрут, обнаруженный в активированном маршруте.   -  person Davide Perozzi    schedule 19.02.2018

Ответы (1)


arrow_upward
2
arrow_downward

У меня такая же проблема. Я заставил его работать, изменив свойство redirectTo на абсолютный путь дочернего маршрута, например (Angular 5.2.5):

{ 
    path: "experiments/:id", 
    component: BrowseExperimentsComponent, 
    children: [
        {path: '', pathMatch: 'full', redirectTo: '/experiments/:id/(browsePanel:overview)'},
        {path: 'overview', component: BrowseOverviewComponent, outlet: 'browsePanel', resolve:{project:ProjectResolverService}},
        {path:':id', component: ExperimentDetail, outlet: 'browsePanel', resolve: {experiment: ExperimentResolverService}}
    ]
},

Я надеюсь, это поможет вам :)

person Davide Perozzi    schedule 19.02.2018
comment
Итак, я подумал, что этот подход работает, но я только что обнаружил в своем отладчике это исключение: ERROR Error: Uncaught (in promise): Error: Cannot redirect to '/experiments/:id/(browsePanel:overview)'. Cannot find ':id'. Error: Cannot redirect to '/experiments/:id/(browsePanel:overview)'. Cannot find ':id' Я получаю это, когда URL-адрес выглядит следующим образом: «/ эксперименты / 1» - person Erik R; 31.03.2018
comment
Я также заметил, что когда я предоставляю полный маршрут, он разрешает правильную розетку, и все, похоже, в порядке, за исключением возникновения исключения. В нем что-то вроде "невозможно сопоставить" - person Erik R; 31.03.2018