I'm building an application based on ABP framework version 4.4. I'm changing the default basic theme of ABP to Nebular. I've encountered many issues and one of them is localizing menu items. In HTML we type {{ '::Menu:Home' | abpLocalization }} for localization but this doesn't work in Nebular. For example:

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

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

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

I've inserted the ABP localization pipe to the title property but the plain text "::Menu:Home" | abpLocalization is displayed on the UI. I know that Nebular's menu title property accepts only string then how to localize menu items? Please suggest some workarounds.

CodePudding user response：

You'll need to use the localization service, to translate the keys before you're passing them to the menu component:

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) {}
}

This does mean, however, that you can't simply export a const from the file's root.

So, for your case, this should work:

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;
    }
}

In ./pages_menu, you'll just build your menu with the translation keys.

CodePudding user response：

You use the pipe in your template.

in your class:

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

in your template:

<div *ngFor="let item of MENU_ITEMS">{{ item.title | localize }}</div>