Question

我在侧面板中使用了一个kendo angular ui panelbar作为treemenu，其中包含子菜单。面板栏实际上链接到角度路由器路径数组（因此每个项目都有一个使用routerLink设置的路径）。

问题在于，当我打开子菜单时，当childitem处于“活动”时，会跟随父 menuitem的路径。（主动===已选择）当子项目尚未“有效”时，有效地遵循子 menuitem的路径。

换句话说，当子项目“活跃”/选中时，看起来好像父菜单项'劫持'菜单...这是正常的行为吗？任何人都有这方面的经验并知道如何避免这种情况？

为了了解我们如何使用它，这就是我们模板的样子（尽管有点简化，我们设置了更多的参数）：

String mySDPath = ""; if( Build.VERSION.SDK_INT >= 21 ) { File[] ExternalStorage = ContextCompat.getExternalFilesDirs( myContext, null ); Emulated = true; for( int i = 0; i < ExternalStorage.length; i++ ) { Emulated = Environment.isExternalStorageEmulated( ExternalStorage[i] ); if( !Emulated ) { mySDPath = ExternalStorage[i].getAbsolutePath(); break; } } }

Answer 1

也许不是最好的解决方案，但我通过踩离routerLink并自行进行路由器导航来解决这个问题和检测我们是否仍然在同一条路线上

如上所述here in the kendo documentation，PanelBar支持的导航方法是使用RouterLink指令或使用stateChange事件。

所以：

我现在在stateChange事件中执行导航（从模板中删除routerLink）

我将routerlink url保存在ID中（使用router.createUrlTree和urlSerializer.serialize来组成url），以便将其传递给stateChange事件

我检查stateChange事件，如果当前路由等于所选项目routerlink url（来自ID）并且仅在导航时检查它是否为   不同

现在是stateChange事件：

public onPanelChange(event: any) {
    if ((event != null) && (event instanceof Array)) {
        let filteredItem = event.find(x => x.selected == true);
        if (typeof filteredItem != 'undefined') {
            if (this.router.url != filteredItem.id.toString())
                this.router.navigate([filteredItem.id.toString()]);
            }
        }
    }
}

这是模板：

<kendo-panelbar (stateChange)="onPanelChange($event)">
    <kendo-panelbar-item *ngFor="let item of items"
                         [title]=""(item?.content) | async""
                         [id]="urlSerialised(item?.routerLink)"
                         [routerLinkActive]="'k-state-selected'" >
                        <kendo-panelbar-item *ngFor="let child of item.children"
                                             [title]="(child?.content) | async"
                                             [id]="urlSerialised(child?.routerLink)"
                                             [routerLinkActive]="'k-state-selected'">
                        </kendo-panelbar-item>
    </kendo-panelbar-item>
</kendo-panelbar>

这就是我撰写网址的方式：

 public urlSerialised(commands: string[]) {
        try {
            let urlTree: UrlTree = this.router.createUrlTree(commands);
            return this.urlSerializer.serialize(urlTree)
        }
        catch (e) {
            return false;
        }
    }

单击子kendo面板栏项时会触发父级kendo面板栏项

1 个答案: