我正在尝试在我的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>
有人可以帮我解决这个问题吗?我已经尝试过教程来解决这个问题,但我没有太多运气。
谢谢。
我刚刚找到了自己问题的答案。
路径本身很好,是需要更改的路由器链接。
我改变了这个:
<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>
一切正常。感谢除了我以外没有其他人找到答案!