在 Angular 中为多个路由添加 Active 类

Question

我有一个侧边栏，里面有多个选项。我设置了 routerLinkActive 类以在点击时激活特定选项，但现在如果我从该路线走得更深或其他路线，活动类是被删除。我想在多条路线上保持一个选项处于活动状态。 我的 HTML 代码如下所示。

 <div class="nav-list">
        <ul class="listing" >
             <li routerLinkActive="active"  [routerLinkActiveOptions]="{exact: true }" >
                <a  [routerLink]="['/']" (click)="disableOptions()" >
                    <i class="fas fa-archive"></i> Projects
                </a>
            </li>
            <li routerLinkActive="active"  [routerLinkActiveOptions]="{  exact: true }" [class.disabled]="isDisabled==true">
                <a [routerLink]="['/notebooks']" [style.pointer-events]="isDisabled ? 'none' : 'auto'" >
                    <i class="fas fa-book"></i> Notebooks
                </a>
            </li>
            <li routerLinkActive="active"  [routerLinkActiveOptions]="{ exact: true }" [class.disabled]="isDisabled==true" >
                <a [routerLink]="['/files']" [style.pointer-events]="isDisabled ? 'none' : 'auto'">
                    <i class="fas fa-file-alt"></i> Files
                </a>
            </li>
            <li routerLinkActive="active"  [routerLinkActiveOptions]="{ exact: true }" [class.disabled]="isDisabled==true">
                <a [routerLink]="['/screens']" [style.pointer-events]="isDisabled ? 'none' : 'auto'">
                    <i class="fas fa-desktop"></i>Screen
                </a>
            </li>
            <li routerLinkActive="active"  [routerLinkActiveOptions]="{ exact: true }" [class.disabled]="isDisabled==true">
                <a  [routerLink]="['/slides']" [style.pointer-events]="isDisabled ? 'none' : 'auto'">
                    <i class="fas fa-photo-video"></i> Slides
                </a>
            </li>
        </ul>

    </div>

正如您在第一张图片中看到的那样，路线是 ['/']，因此活动类工作正常，但在第二张图片中，路线是 ['project/create']，因此活动类没有显示。我想保持两条路线的活动类.请帮我解决这个问题。谢谢

我的路由文件是这样的。

const routes: Routes = [{
    path: '',
    component: PagesComponent,
    canActivate: [AuthGaurdService],
    children: [{
        path: '',
        component: ProjectListingComponent,

    }, {
        path: 'slides',
        component: ScreenListingComponent,

    }, {
        path: 'project',
        loadChildren: './multi-step-form/multistepform.module#MultistepformModule',
    }, {
        path: 'project/slide/create',
        component: AddEditScenarioComponent
    },
    {
      path: 'project/slide/edit',
      component: DragDropToolScenarioComponent
    },
    {
      path: 'notebooks',
      component: NotebookListingComponent
    },
    {
      path: 'screens',
      component: ScreenTableComponent
    },
    {
      path: 'files',
      component: FileListingComponent
    },
    {
      path: 'screens/create',
      component: ScreenCreateComponent
    },
    {
      path: 'files/create',
      component: FileCreateComponent
    },
    {
      path: 'notebook/create',
      component: NotebookCreateComponent
    }
]
}];

['project/create'] 在 multistepform 组件中，它有自己的路由文件。

Answer 1

您可以使用嵌套路由。例如将您的路线定义为

routes: Route[] = [
  { path: '', component: PagesComponent, children: [
    { path: 'project', component: ProjectComponent, children: [
      { path: 'slide/create', component: CreateProjectComponent }
    ]}
  ]}
];

然后你可以在 PagesComponent 和 ProjectComponent 中拥有一个<router-outlet>。然后，routerLinkActive 将对 PagesComponent 中的project/** 路由做出反应，因此接下来的内容无关紧要。 ProjectComponent 中的 routerLinkActive 将对project/slide/create 或您路由到的任何内容处于活动状态。而且我认为您不需要routerLinkActiveOptions。