星云菜单点击刷新页面组件问题

Question

我在我的应用程序中使用星云菜单，当我点击菜单项时，它会自动滚动到页面顶部并再次关闭/展开，这意味着 page.component.ts 再次点击时试图重定向页面。

pages-menu.ts

export const userMenu: NbMenuItem[] = [
  {
    title: "Menu1",
    icon: "nb-person",
    children: [
      {
        title: "SubMenu1",
        link: "/pages/forms/Sub-Menu1"
      },
      {
        title: "SubMenu2",
        link: "/pages/forms/Sub-Menu2"
      }
    ]

如果我们在 pages.component.ts 中调用这个 menu.ts 变量

menu: any
constructor(){
this.menu = userMenu
}

这很好用。但是，如果我想让我的菜单像基于某些用户角色的显示/隐藏一样动态，而不是从 menu.ts 导出，而是直接在 pages.component.ts 文件中分配菜单列表，我面临一个问题，比如每个菜单项的 onclick 它刷新整个组件和拖动侧边栏菜单滚动到顶部并进行刷新。

pages.component.ts

menu: NbMenuItem[]
this.menu = [
      {
        title: "Menu1",
        icon: "nb-person",
        children: [
          {
            title: "SubMenu1",
            link: "/pages/forms/Sub-Menu1"
          },
          {
            title: "SubMenu2",
            link: "/pages/forms/Sub-Menu2"
          }
        ],
"hidden" : this.available_groups.some(v => ['Admin'].includes(v)) ? false : true

请有人指导我解决这个问题，在此先感谢。

Answer 1

只有在获得角色之后，您才会想要构建您的菜单。默认情况下，您将 this.menu 设置为 []。

有一个函数从您的后端服务获取用户并创建一个函数来构建您的菜单。

menu: NbMenuItem[] = [];

ngOnInit() {
 this.getUser();
}

getUser() {
 call your api to get user with roles and then call buildMenuByRole(role)
}

buildMenuByRole(role: any) { <-- use an interface for role
   this.menu = [
    {
        title: 'Dashboard',
        icon: 'home-outline',
        link: '/pages/dashboard',
        hidden: (role && (role.findIndex(x => x.roleID === Roles.SystemAdministrator ||
                                              x.roleID === Roles.ITUser) !== -1)) ? false : true,
        home: true,
      },
   ]
}