1

我有一个侧边栏，其中有多个选项。我将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>

图 1 图 2

正如您在第一张图片中看到的那样，该路线['/']的活动课程运行良好，但在第二张图片中，该路线['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 组件中，它有自己的路由文件。

4

1 回答 1

2

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

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

然后你可以在PagesComponent和ProjectComponent<router-outlet>里面有一个。然后，routerLinkActive 将对 PagesComponent 中的路由做出反应，因此接下来的内容无关紧要。ProjectComponent中的 routerLinkActive将为您路由到的任何对象或任何对象启用。而且我认为您不需要.project/**project/slide/createrouterLinkActiveOptions

于 2019-07-31T09:21:23.873 回答