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

Question

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

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上。我知道星云的菜单标题属性只接受字符串，那么如何本地化菜单项?请建议一些变通办法。

Answer 1

您需要使用本地化服务，在将键传递给菜单组件之前对它们进行翻译:

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中，您只需使用翻译键构建菜单。