Open url in new tab based on data in service in Kendo Menu

Question

我搜索了很多帖子，但没有任何解决方案适用于我的场景。我正在使用通过 sql 构建的数组动态填充剑道菜单。

<kendo-menu [items]="items"
            [vertical]="true"
            style="display:inline-block;">
</kendo-menu>

这是我关注的样本：

https://www.telerik.com/kendo-angular-ui/components/menus/menu/vertical/

以下是项目数组的结构：

export const items: any[] = [
  {
  text: 'Reportingd',
    items: [{ text: 'Dash', url: "https://www.google.com" },  {
    text: 'Realtime',
      items: [{ text: 'DesktopNew', url: "https://www.telerik.com" }, { text: 'laptop', url: "https://www.msn.com" }]
  }]
},
{
  text: 'Other Reporting',
  items: [{ text: 'Training', url: "https://www.msn.com" }, { text: 'UserManual', url: "https://www.msn.com" }, { text: 'Guide',
    items: }]
},
{
  text: 'Tools',
  items:[{ text: 'Training', url: "https://www.msn.com" }]
}];

但是，单击菜单/子菜单会在同一窗口中打开 url。我想在不同的窗口或新标签页中打开。 HTML

<a>

标签在这里不起作用。请建议

<a href="https://www.thesitewizard.com/" target="_blank">thesitewizard.com</a>

Answer 1

为剑道菜单编写选择事件，如下所示。

<kendo-menu [items]="items" (select)="onSelect($event)"></kendo-menu>

之后在 onSelect 方法中使用如下所示的 window.open 方法。

public onSelect({ item }): void {
        if (!item.items) {
            window.open([item.url], "_blank");
        }
    }

Answer 2

这是使用

kendo-menu

和

kendoMenuItemTemplate

在不同选项卡上打开所选菜单项的工作示例

首先在

files.ts

创建json文件。接下来在 html 中，引入引用并使用

ng-template

和

kendoMenuItemTemplate

，我们可以遍历所有菜单项。我们可以将所有普通的 html 标签放在那里以使其可定制。下面是相同的工作示例。

https://stackblitz.com/edit/angular-rrvbsm-5lk9uq?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Ffiles.ts

Answer 3

得以解决。虽然这是两步过程。初始帖子中给出的以下数组结构仅在当前窗口中打开。因此，在初始加载时获取唯一的 MenuID 而不是 url。然后按照 ManirajSS 的建议

public onSelect({ item }): void {

//call service to get url for this MenuID

}