Как с помощью ngx осуществить перевод динамически приходящей переменной?

Question

[Marys777]

Я хочу чтобы у меня переводились пункты меню, файлы для перевода имеются (на 3 языках), в них есть объект "menu"

"menu": {
    "Home": "Главная",
    "Services": "Услуги",
    "Partners": "Партнёры"
  }

Само меню создаётся динамически, и представляет из себя следующий объект:

export let menu: Array<NavItem> = [
  {
    displayName: 'Home',
    iconName: 'home',
    route: '',
  },
  {
    displayName: 'Services',
    iconName: 'cases',
    route: 'services',
  },
  {
    displayName: 'Partners',
    iconName: 'handshake',
    route: 'partners',
  },
];

В компоненте пункта меню есть @Input() item: NavItem;, я хочу подставлять в разметкеitem.displayName в качестве ключа чтобы приходил перевод, примерно так:

<span class="text">{{'menu[item.displayName]' | translate }}</span>

Comments

[Антон]

так должно работать - без кавычек внутри {{ }} Соотвественно menu должно быть публичным свойством компонента, чтобы в шаблоне к нему был доступ.

<span class="text">{{menu[item.displayName]| translate }}</span>

[Marys777]

Антон, 'menu' является ключом у объекта в файлах перевода, значением ключа является объект с пунктами меню

"menu": {
    "Home": "Главная",
    "Services": "Услуги",
    "Partners": "Партнёры"
  }

Answer 1

[Виталий Кадыров]

Сделай удобнее - у меня примерно такая же навигация с lazy loading сделана и пакет ngx-translate, в json переводах задай филды на английском с переводом и во вьюхе их переводи - вот пример ->