Угловая 6 родных маршрутов (для боковой панели)

Question

Я пытаюсь реализовать функциональность маршрутизации в моем приложении Angular, но с частичным успехом.Маршрутизация работает на основном контейнере моего приложения (пути без свойства розетки).

Проблема, с которой я столкнулся, заключается в том, что я пытаюсь реализовать второй выход маршрутизатора для боковой панели (пути со свойством выхода, называемым «боковая панель»).Это не работает.

У меня есть следующие пути:

    const appRoutes: Routes = [
  { path: '', component: WorkspaceAreaComponent }, // localhost:4200/workspace
  { path: 'workspace', component: WorkspaceAreaComponent }, // localhost:4200/workspace
  { path: 'reports', component: ReportsAreaComponent, children: [
      { path: '', component: ActiveProjectStatisticsComponent },
      { path: 'active-project-stats', component: ActiveProjectStatisticsComponent },
      { path: 'productivity-tracking', component: ProductivityTrackingComponent },
    ] },
  { path: 'templates', component: TemplatesAreaComponent, children: [
      { path: '', component: TemplateSectionsComponent },
      { path: 'email', component: TemplateEmailComponent }
    ] },
  { path: '', component: TemplatesComponent, outlet: 'sidebar' },
  { path: 'templates', component: TemplatesComponent, outlet: 'sidebar' },
  { path: 'reports', component: ReportsComponent, outlet: 'sidebar' }
];

Компонент для основного контейнера выглядит следующим образом:

<div class="mainContainer">
  <router-outlet></router-outlet>
</div>

Компонентдля боковой панели выглядит следующим образом:

<div class="asideBox">
  <router-outlet name="sidebar"></router-outlet>
</div>

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

<app-header></app-header>
<div class="bodyContainer">
  <div *ngIf="!isOrganiserPage; else organiserPane" class="flexResponsive768">
    <aside class="width20">
      <!-- SIDEBAR COMPONENT -->
      <app-sidebar></app-sidebar>
    </aside>
    <!-- MAIN COMPONENT -->
    <main class="width80" app-main-pane>

    </main>
  </div>
  <ng-template #organiserPane>
    <main></main>
  </ng-template>
</div>
<app-right-pane></app-right-pane>
<app-modals></app-modals>

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

Спасибо.

Answer 1

Я только что нашел ответ на свой вопрос.

Сами пути были в порядке, необходимо было изменить соединение с маршрутизатором.

Я изменил это из этого:

<div class="mainMenu flex">
      <a routerLink="organiser" class="item" [ngClass]="organiserTabActive ? 'active' : ''" (click)="onClick(1)">ORGANISER</a>
      <a routerLink="workspace" class="item" [ngClass]="workspaceTabActive ? 'active' : ''" (click)="onClick(2)">WORKSPACE</a>
      <a routerLink="reports" class="item" [ngClass]="reportsTabActive ? 'active' : ''" (click)="onClick(3)">REPORTS</a>
      <a routerLink="templates" class="item" [ngClass]="templatesTabActive ? 'active' : ''" (click)="onClick(4)">TEMPLATES</a>
    </div>

к этому:

<div class="mainMenu flex">
      <a [routerLink]="[{ outlets: { sidebar: ['organiser'] } }]" class="item" [ngClass]="organiserTabActive ? 'active' : ''" (click)="onClick(1)">ORGANISER</a>
      <a [routerLink]="[{ outlets: { sidebar: ['workspace'] } }]" class="item" [ngClass]="workspaceTabActive ? 'active' : ''" (click)="onClick(2)">WORKSPACE</a>
      <a [routerLink]="[{ outlets: { sidebar: ['reports'] } }]" class="item" [ngClass]="reportsTabActive ? 'active' : ''" (click)="onClick(3)">REPORTS</a>
      <a [routerLink]="[{ outlets: { sidebar: ['templates'] } }]" class="item" [ngClass]="templatesTabActive ? 'active' : ''" (click)="onClick(4)">TEMPLATES</a>
    </div>

И все это прекрасно работает. Никто, кроме меня, не знает, что нашел ответ!