Блог

Главная - Вопросы по программированию - Как сделать пункты меню локализуемыми с помощью ABP и Nebular

Как сделать пункты меню локализуемыми с помощью ABP и Nebular

#angular #typescript #abp #nebular

Вопрос:

Я создаю приложение на основе платформы 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 в пользовательском интерфейсе отображается обычный текст. Я знаю, что свойство заголовка меню Nebular принимает только строку, тогда как локализовать пункты меню? Пожалуйста, предложите некоторые обходные пути.

Ответ №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) {}
}

Однако это означает, что вы не можете просто экспортировать a 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 , вы просто создадите свое меню с помощью клавиш перевода.

Комментарии:

1. Спасибо за ваш ответ. Но как я могу получить доступ к пунктам меню из других компонентов? Например: У меня есть боковое меню.компонент, в котором я экспортировал константу MENU_ITEMS. Теперь, какие коррективы я должен внести? Боковая панель-меню.Код компонента import { Component } from '@angular/core'; import { MENU_ITEMS } from './pages-menu'; @Component({ selector: 'app-sidebar-menu', template: <nb-меню [элементы]=»меню»><nb-меню [элементы]=»меню»></nb-меню> , styleUrls: ['./sidebar-menu.component.scss'] }) export class SidebarMenuComponent { menu = MENU_ITEMS; }

2. @Dias170497 Я обновил свой ответ

Метки: