我的项目有一个子导航,每个子导航都有不同的侧导航。我正在使用 Clarity Angular 框架。导航是动态的。我遇到的问题是,对于不是列表中第一个的子导航(在这种情况下,现在只有一个),sidenav 链接不会保持活动状态;这是因为它在 Keeper 子导航中查找路径“护理人员”,但是当我进入“事务”选项卡或“代理”选项卡时,该链接不再处于活动状态。知道如何解决这个问题吗?下面是我的代码: subnav 模板
<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']
},
];
侧导航模板
<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>
侧导航组合
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: '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 {
}