Добавить класс Active для нескольких маршрутов в Angular

У меня есть боковая панель с несколькими параметрами. Я установил класс 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, который имеет собственный файл маршрутизации.


angular html css routerlinkactive
person Annonymous    schedule 31.07.2019    source источник
comment
Основная проблема в том, что вы, вероятно, неправильно указали маршруты. Маршрут / никогда не будет таким же, как /project/create. Поэтому я думаю, что у вас должно быть перенаправление на /project для URL-адреса по умолчанию, а остальные должны работать с routerLinkActive автоматически.   -  person standby954    schedule 31.07.2019
comment
@ standby954 Я добавил свой файл маршрута. Не могли бы вы проверить его сейчас и предложить мне решение в соответствии с этим   -  person Annonymous    schedule 31.07.2019

Ответы (1)


arrow_upward
2
arrow_downward

Для этого можно использовать вложенную маршрутизацию. Например, определите свои маршруты как

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

И тогда вы можете иметь <router-outlet> внутри PagesComponent и ProjectComponent. Затем routerLinkActive будет реагировать на маршрут project/** в PagesComponent, поэтому дальнейшие действия не имеют значения. Затем routerLinkActive в ProjectComponent будет активен для project/slide/create или того, к чему вы направляетесь. И я думаю, что вам не нужно routerLinkActiveOptions.

person Felix Lemke    schedule 31.07.2019
comment
Привет, я добавил свой код файла маршрута. Не могли бы вы проверить это и предложить мне решение - person Annonymous; 31.07.2019
comment
Я обновил свой ответ, не могли бы вы создать для него stackblitz? - person Felix Lemke; 31.07.2019
comment
Спасибо, ngfelixl, за ваш ответ, на самом деле я использовал routelinkActiveOptions, потому что опция маршрута ['/'] всегда остается активной. Потому что это корневой маршрут. Я не знаю другого способа решить эту проблему, поэтому я использовал routerlinkActiveoption - person Annonymous; 01.08.2019