我有一个基于用户访问权限的应用程序。我检查用户所处的环境以及他们在该环境中可以访问哪些功能，然后，我将这些功能列为菜单中的导航项。
最初，我的菜单将有两个项目，一个指向“主”屏幕的导航链接和一个使用户退出应用程序的按钮。其他项目（导航链接）是动态加载的。这些项目可以是主要项目，也可以有“子项”。
应用程序启动时，用户将被重定向到主屏幕，并加载其访问列表。但是，当我选择要导航的项目时，我的所有项目都将被选择（它们都接收“menu-item-active”类），并且它们的“href”值将更改为所选项目的链接。为什么会发生这种情况，我该如何解决？请帮忙！！！ ;(
menu.component.html：
<ion-menu type="overlay" [contentId]="contentId">
<ion-header>
<ion-toolbar>
<ion-menu-button slot="start">
<ion-icon name="close-outline"></ion-icon>
</ion-menu-button>
<ion-title>MENU</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list class="ion-padding">
<a routerLink="home"
[routerLinkActive]="'menu-item-active'"
[routerLinkActiveOptions]="{ exact: true }"
class="menu-item"
(click)="closeMenu()">
<mat-icon>home</mat-icon>
<ion-label>Home</ion-label>
</a>
<ng-container *ngFor="let item of navigationItems">
<ng-container *ngIf="item.type === 'basic'">
<a [routerLink]="item.link"
[routerLinkActive]="'menu-item-active'"
[routerLinkActiveOptions]="{ exact: true }"
class="menu-item"
(click)="closeMenu()">
<mat-icon>{{ item.icon }}</mat-icon>
<ion-label>{{ item.title }}</ion-label>
</a>
</ng-container>
<ng-container *ngIf="item.type === 'collapsable'">
<ion-accordion-group>
<ion-accordion>
<ion-item slot="header" class="menu-item-header">
<mat-icon class="menu-item-header-icon">{{ item.icon }}</mat-icon>
<ion-label>{{ item.title }}</ion-label>
</ion-item>
<div slot="content">
<ion-list *ngIf="item.children && item.children.length > 0">
<a *ngFor="let child of item.children"
[routerLink]="child.link"
[routerLinkActive]="'menu-item-active'"
[routerLinkActiveOptions]="{ exact: true }"
class="menu-item"
(click)="closeMenu()">
<mat-icon>{{ child.icon }}</mat-icon>
<ion-label>{{ child.title }}</ion-label>
</a>
</ion-list>
</div>
</ion-accordion>
</ion-accordion-group>
</ng-container>
</ng-container>
<ion-button class="logout-button" fill="clear" (click)="onLogout()">
<span class="logout-button-content">
<ion-icon name="log-out-outline"></ion-icon>
<ion-label>Sair</ion-label>
</span>
</ion-button>
</ion-list>
</ion-content>
<ion-footer>
<ion-item>footer</ion-item>
</ion-footer>
</ion-menu>
menu.component.ts：
import { Component, Input, OnDestroy, OnInit } from '@angular/core';
import { Subject, takeUntil } from 'rxjs';
import { AuthService } from 'src/app/core/auth/auth.service';
import { MenuNavigationItem } from './menu.model';
import { UserAccessService } from 'src/app/core/user-access/user-access.service';
import { Functionality } from 'src/app/core/auth/auth.model';
import { MenuController } from '@ionic/angular';
@Component({
selector: 'app-menu',
templateUrl: './menu.component.html',
styleUrls: ['./menu.component.scss'],
})
export class MenuComponent implements OnInit, OnDestroy {
private _unsubscribeAll: Subject<any> = new Subject<any>();
@Input() contentId: string;
public navigationItems: MenuNavigationItem[] = [];
constructor(
private _authService: AuthService,
private _userAccessService: UserAccessService,
private _menuController: MenuController
) { }
private verifyUserAccessInEnvironment(funccionalities: Functionality[]): boolean {
return funccionalities.length === 0 ? false : true;
}
private fillNavigationItems(): void {
let filteredFuncionalities: Functionality[] = [];
this._userAccessService.getFilteredFuncionalitiesIds()
.then((functionalities: Functionality[]) => {
filteredFuncionalities = functionalities;
this.navigationItems = this._userAccessService.getPowerBiFunctionalitiesNavigation(filteredFuncionalities);
this._userAccessService.hasPowerBiAccessInCurrentEnvironment
.next(this.verifyUserAccessInEnvironment(functionalities));
});
}
ngOnInit(): void {
this._userAccessService.currentEnvironmentId
.pipe(takeUntil(this._unsubscribeAll))
.subscribe(() => {
this.fillNavigationItems();
});
}
closeMenu(): void {
this._menuController.close();
}
onLogout(): void {
this._authService.logout();
}
ngOnDestroy(): void {
this._unsubscribeAll.next(null);
this._unsubscribeAll.complete();
}
}
以下是加载导航项目的示例：
[
{
"id": "703",
"title": "ITEM 1",
"type": "collapsable",
"icon": "business",
"children": [
{
"id": "778",
"title": "ITEM 1.1",
"type": "basic",
"icon": "",
"link": "item/778",
"children": []
},
{
"id": "838",
"title": "ITEM 1.2",
"type": "basic",
"icon": "",
"link": "item/838",
"children": []
},
{
"id": "751",
"title": "ITEM 1.3",
"type": "basic",
"icon": "",
"link": "item/751",
"children": []
}
]
},
{
"id": "701",
"title": "ITEM 2",
"type": "collapsable",
"icon": "pets",
"children": [
{
"id": "813",
"title": "ITEM 2.1",
"type": "basic",
"icon": "",
"link": "item/813",
"children": []
},
{
"id": "810",
"title": "ITEM 2.2",
"type": "basic",
"icon": "",
"link": "item/810",
"children": []
}
]
}
]
编辑1：由于每当选择一个项目时都会调用“closeMenu()”方法，因此我在其中调用了“fillNavigationItems()”方法并添加了一个“console.log(this.navigationItems);”这些项目都是正确的，有各自的链接。但是，由于某种原因，当我检查浏览器的开发人员工具中的每个项目时，所有项目都有“menu-item-active”类和带有最后选定项目值的“href”。
我不知道为什么这是解决方案，但它解决了我的问题。
我刚刚在我的 routerLinks 值中添加了一个“/”，如下所示：
routerLink="home"
[routerLink]="'/' + item.link"
[routerLink]="'/' + child.link"