Angular 6 Routing с использованием нескольких выходов

Question

У меня есть следующий сценарий. У меня есть два компонента, InvLoginComponent а также InvDashboardComponent которые смонтированы на "основном" (или безымянном) маршрутизаторе в моем приложении. Пользователь входит в систему и направляется к компоненту панели мониторинга. Внутри приборной панели у меня есть сиденав со ссылками. Когда ссылки нажаты, я хочу загрузить связанный компонент (ы) внутри названного выхода маршрутизатора внутри InvDashSidenavComponent который вложен в InvDashboardComponent, Пока что код выглядит так:

app.module.ts

// Routes
const routes: Routes = [
  {path: "", redirectTo: "login", pathMatch: "full"},
  {path: "login", component: InvestigatorLoginComponent },
  {path: "dashboard", component: InvDashboardComponent },
  {path: "pending", component: PendingCasesComponent, outlet:'casesOutlet' },
  {path: "completed", component: CompletedCasesComponent, outlet: 'casesOutlet'}, 
  {path: "flagged", component: FlaggedCasesComponent, outlet: 'casesOutlet' }
];
// ... in imports
RouterModule.forRoot(
  routes, { enableTracing: false} // <= debugging
),
// ... rest of app.module.ts

app.component.ts

<router-outlet
(activate)="activateHandler($event)"
(deactivate)="deactivateHandler($event)"
></router-outlet> <!-- Nameless or primary outlet -->

inv-dash-sidenav.component.ts

caseRoutes = [
{ name: 'Pending', href: 'pending' },
{ name: 'Completed', href: 'completed' },
{ name: 'Review', href: 'review' },
{ name: 'Flagged', href: 'flagged' }
]; // used in the template for binding to routerLink

inv-dash-sidenav.component.html

<mat-nav-list *ngIf="showCases">
    <a mat-list-item *ngFor="let c of caseRoutes">
      <a [routerLink]="[{ outlets: {casesOutlet:[c.href] } }]" routerLinkActive="active">{{ c.name }}</a>
    </a>
</mat-nav-list>
<!-- Later in the template -->
<router-outlet name="casesOutlet"></router-outlet>

Когда я запускаю приложение, происходит следующее: 1. Панель инструментов и все другие компоненты, не связанные с sidenav, загружаются, как и раньше. 2. После запуска sidenav с помощью кнопки переключения, sidenav скользит как обычно. 3. При нажатии на ссылку я получаю следующее сообщение об ошибке: Error: Cannot match any routes. URL Segment: 'dashboard',

Что является причиной этой ошибки и как это исправить?

Answer 1

В значительной степени у вас есть две проблемы, во-первых, ссылка маршрутизатора ожидает некоторую строку, которая указывает место, куда пользователь будет перенаправлен, по этой причине вы должны (как сказано в комментариях) использовать [routerLink]="c.href" вместо [routerLink]=[{outlets : {casesOutlet:[c.ref]}}],

Итак, теперь у вас есть следующая ошибка, которая Error: Cannot match any routes. URL Segment: 'dashboard/pending это потому, что вы используете относительный путь вместо absoulte, исправление заключается в следующем: вместо [routerLink]="c.href" делать [routerLink]="'/'+c.href", Используя косую черту, вы получаете доступ к абсолютному пути, другими словами, вы строите путь от корня, и когда вы используете routerLink без '/' вы строите относительный путь, что означает, что вы объединяете место, в которое хотите попасть, с текущей позицией. Например, если вы находитесь на пути "панель мониторинга" и нажимаете на ссылку маршрутизатора, ведущую к pending (без косой черты) вы будете перенаправлены на путь dashboard/pending (что в вашем случае вы не предоставляете в маршрутизаторе), поэтому, если вы хотите исправить это, вам просто нужно изменить pending => /pending так что вы будете перенаправлены на путь pending (который является одним из поддерживаемых вами маршрутов в вашем случае).

Вот краткая демонстрация в CodeSandBox, с которой вы можете поиграть и лучше понять, как работают абсолютные и относительные маршруты.