Ctrl+Щелкнут или в среднем щелкните элемент боковой панели ⇐ CSS

[Anonymous]

Когда вы CTRL+щелкните или нажмите на средний щелчок элемент боковой панели:
Англуна все еще обновляет [(ActiveId)] через событие Click, запускаемое Ngbnavlink, хотя маршрут не изменился.
Это вызывает синий фон (активный стиль), чтобы применить к Clicked Menu Ittem в текущем вкладе, который является неправильным. />sidebar.component.html
class="nav nav-pills bg-light flex-shrink-0 p-3 position-fixed min-vh-100 rounded">
Protect Accounts
Direct Accounts

Tag Monitors

Users
Scoring Configuration

< /code>
sidebar.component.ts
import { Component, inject } from '@angular/core';
import { NavigationEnd, Router, RouterLink } from '@angular/router';
import { NgbNav, NgbNavItem, NgbNavLink } from '@ng-bootstrap/ng-bootstrap';
import { filter } from 'rxjs';

import { RoutePaths } from '../app.routes';

@Component({
selector: 'app-sidebar',
imports: [NgbNav, NgbNavItem, NgbNavLink, RouterLink],
templateUrl: './sidebar.component.html',
})
export class SidebarComponent {
protected activeId: string | null = null;
protected RoutePaths = RoutePaths;
protected navItems = new Map([
[RoutePaths.ProtectAccounts, [RoutePaths.ProtectAccounts]],
[RoutePaths.DirectAccounts, [RoutePaths.DirectAccounts]],
[RoutePaths.TagMonitors, [RoutePaths.TagMonitors]],
[RoutePaths.Users, [RoutePaths.Users]],
[RoutePaths.ScoringConfig, [RoutePaths.ScoringConfig]],
]);

private router = inject(Router);

constructor() {
this.router.events
.pipe(filter((event) => event instanceof NavigationEnd))
.subscribe((routerEvent) => {
let active = null;
for (const [id, paths] of this.navItems) {
console.log(id);
console.log(paths);
if (paths.find((path) => routerEvent.urlAfterRedirects.startsWith(`/${path}`))) {
active = id;
break;
}
}
this.activeId = active;
});
}

handleLinkClick(event: MouseEvent, path: string) {
if (event.ctrlKey || event.metaKey) {
console.log('clicked', { isCtrl: event.ctrlKey, isMeta: event.metaKey, button: event.button });

const fullUrl = this.router.serializeUrl(this.router.createUrlTree([`/${path}`]));
window.open(fullUrl, '_blank');
// event.preventDefault();
// event.stopPropagation();
// return;
}
}
}
< /code>
Когда я использую Ctrl+Щелкните в боковой панели меню, он должен быть открыт страницу на новой вкладке (которая работает, как и ожидалось), но на текущей вкладке активный стиль (синий фон) был изменен на элемент Ctrl+Clicked Side Menu на текущей активной странице с того места, где мы нажали на CTRL+Click Event. Кто -нибудь может помочь мне исправить это.

Подробнее здесь: https://stackoverflow.com/questions/797 ... debar-item