Блог

Итак, я столкнулся с известной проблемой маршрутизации angular «именованная розетка с лениво загруженным модулем». Похоже, что эта проблема закрыта, и этот парень предоставил plunker с рабочим решением, которому я следил. Однако я все еще получаю сообщение об ошибке и не могу понять природу этой проблемы

Ошибка: не удается сопоставить какие-либо маршруты. Сегмент URL:

Я пытался использовать pathMatch: ‘full’ с разными маршрутами перенаправления на разные компоненты, но в итоге всегда получал одну и ту же ошибку.

Я застрял уже на пару часов, поэтому решил задать вопрос здесь. В чем моя проблема и чего мне не хватает?

Моя настройка

app.routing.ts:

  const routes: Routes = [
      {
        path: '',
        loadChildren: 'app/home/home.module#HomeModule',
      },
      {
        path: 'admin',
        loadChildren: 'app/admin/admin.module#AdminModule',
      },
      {
        path: 'data',
        loadChildren: 'app/data/data.module#DataModule',
      },
      {
        path: '**',
        redirectTo: ''
      }
    ];
  

app.component.html

 <app-header></app-header>
<router-outlet></router-outlet>
  

data.routing-module.ts

     const routes: Routes = [
  {
    path: 'summary',
    component: SummaryComponent,
    canActivate: [AuthGuard],
  },
  {
    path: 'management/:id',
    component: DataComponent,
    canActivate: [AuthGuard],
    children: [
      {
        path: 'activities',
        component: ActivitiesComponent,
        outlet: 'activities',
      },
      {
        path: 'researches',
        component: ResearchesComponent,
        outlet: 'researches',
      }
    ]
  },
  {
    path: 'review/:id',
    component: InfoComponent,
    canActivate: [AuthGuard],
  },
];
  

data.component.html

 <mat-drawer-container class="docs-viewer-container">

  <mat-drawer position='start' [mode]='mode'>
    <router-outlet name="activities"></router-outlet>
  </mat-drawer>

  <mat-drawer position='end' [mode]='mode'>
    <router-outlet name="researches"></router-outlet>
  </mat-drawer>

  <mat-drawer-content>
    ... 
     // content
    ...
  </mat-drawer-content>

</mat-drawer-container>
  

Итак, целевая страница для модуля данных является компонентом сводки после того, как пользователь нажал ссылку для навигации по URL-маршруту, выглядит так: 'path/data/summary?params' . Резюме. компонент имеет функцию навигации

   onActivitySelection(event) {

    this.queryParams.offset = 0;
    this.queryParams.limit = 25

    this.router.navigate([{
        outlets: {
          'activities': '/data/management/'   event.id   '/activities'
        }
      }],
      {
        queryParams: this.queryParams
      })
  }
  

Как вы можете видеть, маршрут перенаправления должен быть ‘/data /management /:id / activities’. Но ошибка говорит о том, что этот маршрут не может быть найден.

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

Попробуйте разместить маршруты модуля в компоненте индекса. У вас есть маршрутизатор-выход для модуля приложения, но не для любого из нижележащих уровней.

Для маршрутов модуля данных:

 {
    path: '', component: DataIndexComponent, canActivate: [AuthGuard],
    children: [
      {
       path: 'summary',
       component: SummaryComponent
      },
      ...[restOfRoutes]
      ]
}
  

В DataIndexComponent add <router-outlet></router-outlet> .

С другой стороны, если вы используете ту же защиту аутентификации, вы можете поместить ее на уровень индекса модуля.