Angular 6 同级路由(用于侧边栏)
Angular 6 Sibling Routing (for a sidebar)
我正在尝试在我的 Angular 应用程序中实现路由功能,并取得了部分成功。路由在我的应用程序的主容器上工作(路径,没有出口 属性)。
我遇到的问题是我正在尝试为侧边栏实现第二个路由器插座(带有插座 属性 的路径称为 'sidebar')。它不起作用。
我的路径如下:
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>
有人可以帮我解决这个问题吗?我已经尝试通过教程来解决这个问题,但我的运气并不好。
谢谢。
我刚刚找到了我自己问题的答案。
路径本身没有问题,需要更改的是路由器 link。
我是这样改的:
<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>
一切正常。感谢除我之外的其他人找到答案!
我正在尝试在我的 Angular 应用程序中实现路由功能,并取得了部分成功。路由在我的应用程序的主容器上工作(路径,没有出口 属性)。
我遇到的问题是我正在尝试为侧边栏实现第二个路由器插座(带有插座 属性 的路径称为 'sidebar')。它不起作用。
我的路径如下:
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>
有人可以帮我解决这个问题吗?我已经尝试通过教程来解决这个问题,但我的运气并不好。
谢谢。
我刚刚找到了我自己问题的答案。
路径本身没有问题,需要更改的是路由器 link。
我是这样改的:
<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>
一切正常。感谢除我之外的其他人找到答案!