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" do [routerLink]="'/'+c.href".При использовании косой черты вы получаете доступ к абсолютному пути, другими словами, вы строите путь из корня, а когда вы используете routerLink без '/', вы создаете относительный путь, что означает, что вы объединяете место, котороеВы хотите перейти с текущей позиции.Например, если вы находитесь на пути «панель мониторинга» и щелкаете ссылку маршрутизатора, ведущую к pending (без косой черты), вы будете перенаправлены на путь dashboard/pending (который в вашем случае вы не указали в маршрутизаторе),поэтому, если вы хотите исправить это, вам просто нужно изменить pending => /pending, чтобы вы были перенаправлены на путь pending (который является одним из поддерживаемых маршрутов в вашем случае).

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