如何使用 ABP 和 Nebular 使菜单项可本地化

Question

我正在构建一个基于 ABP 框架 4.4 版的应用程序。我正在将 ABP 的默认基本主题更改为 Nebular。我遇到了很多问题，其中之一就是本地化菜单项。在 HTML 中，我们键入 {{ '::Menu:Home' | abpLocalization }} 进行本地化，但这在 Nebular 中不起作用。例如：

import { NbMenuItem } from '@nebular/theme';

export const MENU_ITEMS: NbMenuItem[] = [
  {
    title: '"::Menu:Home" | abpLocalization',
    icon: 'home-outline',
    link: '/',
    home: true,
  },
];

我已将 ABP 本地化管道插入到 title 属性，但纯文本 "::Menu:Home" | abpLocalization 显示在 UI 上。我知道 Nebular 的菜单标题属性只接受字符串然后如何本地化菜单项？请提出一些解决方法。

Answer 1

您需要使用localization service 来翻译键，然后再将它们传递给菜单组件：

import {
  LocalizationService
} from '@abp/ng.core';

class MyClass {
  public readonly MENU_ITEMS: NbMenuItem[] = [{
    title: this.localizationService.instant('::Menu:Home'),
    icon: 'home-outline',
    link: '/',
    home: true,
  }];

  constructor(private localizationService: LocalizationService) {}
}

但是，这确实意味着您不能简单地从文件的根目录导出 const。

因此，对于您的情况，这应该可行：

import { Component. OnInit } from '@angular/core';
import { LocalizationService } from '@abp/ng.core';
import { MENU_ITEMS } from './pages-menu';

@Component({
    selector: 'app-sidebar-menu',
    template:  <nb-menu [items]="menu"></nb-menu> ,
    styleUrls: ['./sidebar-menu.component.scss']
})
export class SidebarMenuComponent implements OnInit {
    menu: NbMenuItem[];

    constructor(private localizationService: LocalizationService) {}

    ngOnInit(): void {
        const menuTranslated = [...MENU_ITEMS];
        menuTranslated.forEach(item => item.title = this.localizationService.instant(item.title));
        this.menu = menuTranslated;
    }
}

在./pages_menu 中，您只需使用翻译键构建菜单。