Ошибка: не удается сопоставить маршруты при использовании имени выхода маршрутизатора в Angular

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

Ошибка: не перехвачено (в обещании): Ошибка: не удается сопоставить ни один маршрут. Сегмент URL: "профиль" Ошибка: не удается сопоставить ни один маршрут. Сегмент URL: 'профиль'

Мои 2 розетки роутера находятся в одном месте


export const routes: Routes = [
  {
    path: '', component: LayoutComponent,
    canActivate: [AuthenticationGuard, AuthorizationGuard],
    canActivateChild: [AuthenticationGuard, AuthorizationGuard],
    children: [
      {
        path: '',
        pathMatch: 'full',
        redirectTo: 'deals',
      },
      {
        path: 'deals',
        component: DealsComponent,
      },
      {
        outlet: 'modal',
        path: 'profile',
        component: ProfileComponent,
        data: {
          title: 'My Profile',
          sidebar: {
            category: 'profile',
            text: 'My Profile',
            icon: 'person',
          },
        }
      },

Я использую [routerLink]="['', {outlets: { modal: 'profile' } } ]" для перехода по ссылке.

Я сделал рабочий пример проблемы: https://stackblitz.com/edit/angular-asicvf

Кто-нибудь может мне помочь, пожалуйста? Спасибо


angular router-outlet
person Baptiste Goudey    schedule 15.04.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я бы использовал массив для объекта modal

<a [routerLink]="['', {outlets: { modal: ['profile'] }} ]">LINK</a>

Вы также должны изменить порядок ваших дочерних маршрутов и поместить redirectTo в конец массива, потому что он будет соответствовать всем вашим маршрутам, прежде чем Angular сможет прочитать другие.

На самом деле ваш маршрут плохо отформатирован. Вы должны иметь все маршруты на одном уровне и не использовать childrenproperty основного маршрута. Что-то вроде:

export const routes: Routes = [
  { path: '', component: AppComponent },
  { path: 'deals', component: HelloComponent },
  {
    outlet: 'modal',
    path: 'profile',
    component: Hello2Component,
    data: {
      title: 'My Profile',
      sidebar: {
        category: 'profile',
        text: 'My Profile',
        icon: 'person',
      },
    }
  },
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'deals',
  },
];

Я обновил ваш stackblitz с правильным решением здесь

person ahbon    schedule 15.04.2019
comment
Спасибо, но не сработало :( Есть ли у вас другие идеи, почему мой маршрут не распознается? - person Baptiste Goudey; 16.04.2019
comment
@BaptisteGoudey, пожалуйста, предоставьте рабочий пример вашей проблемы - person ahbon; 16.04.2019
comment
@BaptisteGoudey Я обновил свой ответ, исправив вашу проблему - person ahbon; 17.04.2019
comment
Спасибо, я могу получить ваше решение, но дело в том, что я делаю свои маршруты в детстве, потому что мой основной маршрут включает охрану. Это действительно невозможно в детстве? - person Baptiste Goudey; 17.04.2019