Angular 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>

而且一切正常。感谢除了我之外没有其他人找到答案！