Kendo Angular PanelBar子项激活时点击触发父项路由异常求助

我之前也踩过Kendo Angular PanelBar结合Angular Router的这个坑！本质问题是激活状态的子菜单项点击时，事件冒泡触发了父项的routerLink，再加上PanelBar的自动激活判断和Angular Router的路由激活逻辑偶尔冲突，才会出现这种诡异的跳转问题。给你几个靠谱的解决方案：

1. 阻止子项点击事件冒泡 #

这是最直接的临时修复方案，通过阻止子项的点击事件向上传递，避免父项的路由被误触发：

在模板中给子菜单项添加点击事件处理：

<kendo-panelbar-item 
  [title]="'父菜单'" 
  [routerLink]="['/parent']">
  <kendo-panelbar-item 
    [title]="'子菜单'" 
    [routerLink]="['/parent/child']"
    (click)="stopEventPropagation($event)">
  </kendo-panelbar-item>
</kendo-panelbar-item>

在组件类中实现事件阻止方法：

stopEventPropagation(event: MouseEvent): void {
  event.stopPropagation();
}

2. 手动控制PanelBar的激活与展开状态 #

Kendo PanelBar的自动激活逻辑有时候会和Angular Router的routerLinkActive行为不一致，导致父项在子路由激活时也被错误标记为选中。我们可以手动绑定selected和expanded属性，基于当前路由精准判断：

首先在组件类中定义菜单数据和路由判断逻辑：

import { Router } from '@angular/router';

constructor(private router: Router) {}

menuItems = [
  {
    title: '父菜单',
    routerLink: ['/parent'],
    expanded: false,
    items: [
      {
        title: '子菜单',
        routerLink: ['/parent/child']
      }
    ]
  }
];

// 判断菜单项是否处于选中状态
isItemSelected(item: any): boolean {
  return this.router.isActive(item.routerLink[0], { exact: true });
}

// 手动处理父项的展开/折叠
onParentItemClick(event: any): void {
  event.item.expanded = !event.item.expanded;
}

然后修改模板，绑定自定义的选中和展开状态：

<kendo-panelbar>
  <kendo-panelbar-item 
    [title]="item.title"
    [routerLink]="item.routerLink"
    [selected]="isItemSelected(item)"
    [expanded]="item.expanded"
    (click)="onParentItemClick($event)"
    *ngFor="let item of menuItems">
    <kendo-panelbar-item 
      [title]="child.title"
      [routerLink]="child.routerLink"
      [selected]="isItemSelected(child)"
      (click)="stopEventPropagation($event)"
      *ngFor="let child of item.items">
    </kendo-panelbar-item>
  </kendo-panelbar-item>
</kendo-panelbar>

3. 检查路由配置是否存在歧义 #

确保你的路由层级配置正确，避免父路由的路径被子路由意外匹配。比如要把子路由定义在父路由的children数组中，不要给父路由设置通配符：

const routes: Routes = [
  {
    path: 'parent',
    component: ParentComponent,
    children: [
      { path: 'child', component: ChildComponent }
    ]
  }
];

这样Angular Router就能正确区分父路由和子路由的激活状态，从根源上减少PanelBar判断错误的概率。

内容的提问来源于stack exchange，提问作者AardVark71