Angular 6 Sibling Routing (для боковой панели)

Я пытаюсь внедрить функцию маршрутизации в свое приложение 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>

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

Спасибо.


angular angular-routing router-outlet angular-template angular2-routing
person Chosen1    schedule 24.03.2019    source источник
comment
вы проверили stackoverflow .com/questions/34628848/   -  person Akber Iqbal    schedule 24.03.2019

Ответы (1)


arrow_upward
0
arrow_downward

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

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

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

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

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

person Chosen1    schedule 24.03.2019