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

Angular管道仅支持在组件模板中使用，直接写在TS配置的属性中不会被解析，只会作为普通字符串渲染，以下是两种可行实现方案：

方案1：调用ABP本地化服务动态生成菜单配置 #

ABP的LocalizationService提供了直接获取本地化字符串的API，你可以在菜单组件中注入该服务，动态生成符合Nebular要求的菜单项数组。

import { Component, OnInit } from '@angular/core';
import { NbMenuItem } from '@nebular/theme';
import { LocalizationService } from '@abp/ng.core';

@Component({
  // 你的原有组件配置
})
export class MenuComponent implements OnInit {
  menuItems: NbMenuItem[] = [];

  constructor(private localizationService: LocalizationService) {}

  ngOnInit(): void {
    this.menuItems = [
      {
        title: this.localizationService.instant('::Menu:Home'),
        icon: 'home-outline',
        link: '/',
        home: true,
      },
      // 其余菜单项按相同规则配置
    ];
  }
}

如果需要支持切换语言后菜单实时更新，可使用get方法订阅本地化结果：

ngOnInit(): void {
  this.localizationService.get('::Menu:Home').subscribe(homeText => {
    this.menuItems = [
      {
        title: homeText,
        icon: 'home-outline',
        link: '/',
        home: true,
      },
      // 其余菜单项
    ];
  });
}

方案2：自定义Nebular菜单项渲染模板 #

你也可以保留原有的常量菜单配置，只自定义菜单项的渲染逻辑，在模板中直接使用abpLocalization管道：

<!-- 菜单组件模板 -->
<nb-menu [items]="MENU_ITEMS">
  <ng-template #nbMenuItem let-item>
    <span>{{ item.title | abpLocalization }}</span>
  </ng-template>
</nb-menu>

对应的TS配置直接存本地化键即可：

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

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

内容的提问来源于stack exchange，提问作者Dias170497