Question

我的项目有一个子导航，每个子导航都有不同的侧边导航。我正在使用 Clarity Angular 框架。导航是动态的。我遇到的问题是，对于不是列表中第一个的子导航（在这种情况下现在只有一个），sidenav 链接不会保持活动状态；这是因为它在 Keeper 子导航中查找路径“caregivers”，但是当我进入“交易”选项卡或“机构”选项卡时，该链接不再处于活动状态。知道如何解决这个问题吗？下面是我的代码：子导航模板

<nav class="subnav">
    <ul class="nav">
      <li class="nav-item"  *ngFor="let nav of navigations">
        <a class="nav-link"  [routerLink]="nav.link" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: false }" >{{nav.title}}</a>
      </li>

    </ul>
  </nav>

子导航组合

import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { navigations } from './navigations';

@Component({
  selector: 'app-subnav',
  templateUrl: './subnav.component.html',
  styleUrls: ['./subnav.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class SubnavComponent implements OnInit {

  navigations = navigations;
  constructor() { }

  ngOnInit(): void {
  }

}

子导航界面

import { Navigation } from '../models/navigation.interface';

export const navigations: Navigation[] = [{

  id: 'KEEPER',
  title: 'Keeper',
  icon: '',
  link: ['/caregivers']
},

  {
   id: 'HHA',
  title: 'HHA Exchange',
  icon: '',
  link: ['/hha-caregivers']
},
  {
    id: 'ADMIN',
    title: 'Admin',
    icon: '',
    link: ['/admin/users']
  },

];

sidenav 模板

<nav>
  <section class="sidenav-content">
    <ng-container *ngFor="let nav of navigations">
      <a
        class="nav-link"
        *ngIf="!nav?.children?.length"
        routerLinkActive="active"
        [routerLink]="nav.link"
        [routerLinkActiveOptions]="{ exact: true }"
      >{{ nav.title }}</a
      >
      <section *ngIf="nav.children?.length" class="nav-group collapsible">
        <input id="tabexample1" type="checkbox" />
        <label for="tabexample1">{{nav.title}}</label>
        <ul class="nav-list">
          <li>
            <a
              class="nav-link"
              *ngFor="let childNav of nav.children"
              [routerLink]="childNav.link"
              routerLinkActive="active"

              >{{childNav.title}}</a
            >
          </li>
        </ul>
      </section>
    </ng-container>
  </section>
</nav>

sidenav comp

import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { navigations } from './navigations';

@Component({
  selector: 'app-subnav',
  templateUrl: './subnav.component.html',
  styleUrls: ['./subnav.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class SubnavComponent implements OnInit {

  navigations = navigations;
  constructor() { }

  ngOnInit(): void {
  }

}

sidenav 界面

import { Navigation } from '../models/navigation.interface';

export const navigations: Navigation[] = [

  {
    id: 'caregivers',
    title: 'Caregivers',
    link: ['/', 'caregivers'],
  },

  {
    id: 'agencies',
    title: 'Agencies',
    link: ['/', 'agencies'],
  },

  {
    id: 'transactions',
    title: 'Transactions',
    link: ['/', 'transactions'],
  },
];

主导航界面


export interface Navigation {
  id: string;
  title?: string;
  icon?: string;
  link?: string[];
  children?: Navigation[];
}

app.routing 组件

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {map} from 'rxjs/operators';
import {DefaultLayoutComponent} from './layout/default.layout.component';
import {AdminLayoutComponent} from './layout/admin.layout.component';
import {HhaLayoutComponent} from './layout/hha.layout.component';


import {
  canActivate,
  customClaims,
  redirectLoggedInTo,
  redirectUnauthorizedTo,
} from '@angular/fire/auth-guard';
import {pipe} from 'rxjs';


const adminOnly = () =>
  pipe(
    customClaims,
    map((claims) => {
      // console.log('claims', claims)
      return claims?.role === 'admin';
    })
  );
const redirectUnauthorizedToLogin = () => redirectUnauthorizedTo(['auth']);
const routes: Routes = [
  {path: '', pathMatch: 'full', redirectTo: 'caregivers'},
  {
    path: '',
    component: DefaultLayoutComponent,
    children: [
      {
        path: 'caregivers',
        loadChildren: () =>
          import('./caregivers/caregivers.module').then(
            (m) => m.CaregiversModule,
          ),
        ...canActivate(() => adminOnly()),
        ...canActivate(() => redirectUnauthorizedToLogin()),
      },
    ],
  },
  {
    path: '',
    component: DefaultLayoutComponent,
    children: [
      {
        path: 'agencies',
        loadChildren: () =>
          import('./agencies/agencies.module').then(
            (m) => m.AgenciesModule
          ),
        ...canActivate(() => adminOnly()),
        ...canActivate(() => redirectUnauthorizedToLogin()),
      },
    ],
  },
  {
    path: '',
    component: DefaultLayoutComponent,
    children: [
      {
        path: 'transactions',
        loadChildren: () =>
          import('./transactions/transactions.module').then(
            (m) => m.TransactionsModule
          ),
        ...canActivate(() => adminOnly()),
        ...canActivate(() => redirectUnauthorizedToLogin()),
      },
    ],
  },

  {
    path: 'admin',
    component: AdminLayoutComponent,
    loadChildren: () =>
      import('./admin/admin.module').then(
        (m) => m.AdminModule
      ),
    ...canActivate(() => adminOnly()),
    ...canActivate(() => redirectUnauthorizedToLogin()),
  },
  {
    path: '',
    component: HhaLayoutComponent,
    loadChildren: () =>
      import('./hha-caregivers/hha-caregivers.module').then(
        (m) => m.HhaCaregiversModule
      ),
    ...canActivate(() => adminOnly()),
    ...canActivate(() => redirectUnauthorizedToLogin()),
  },
  {
    path: 'auth',
    loadChildren: () =>
      import('./auth/auth.module').then(
        (m) => m.AuthModule),
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {enableTracing: false})],
  exports: [RouterModule],
})

export class AppRoutingModule {
}

链接未突出显示：

链接突出显示：

当子导航链接 routerlink Angular

0 个答案: