Блог

Главная - Вопросы по программированию - Используйте стройный i18n в сервисе / простой файл JS

Используйте стройный i18n в сервисе / простой файл JS

#svelte #svelte-component

Вопрос:

Я использую Svelte i18n для своего проекта, он отлично работает в моих компонентах Svelte.

Но у меня есть несколько файлов JS (например, для констант), я хочу использовать i18n для перевода некоторых ключей, например (в /services/constants.js ) :

 import { _ } from 'svelte-i18n'

export const STATUS_OK = 1;
export const STATUS_PENDING = 2;
export const STATUS_ERROR = 3;
export const STATUS_INACTIVE = 4;
export const STATUS_PRICE_NOT_FOUND = 5;

export const STATUTES = {
  [STATUS_OK]: {
    text: _('urls.statutes.ok'),
    class: 'text-green-500',
  },

Но я получил ошибку, могу ли я использовать _ функцию в файле JS ? Или мне следует создать своего рода гибкий компонент для обработки моих констант ?

Ответ №1:

Если я правильно понял, как svelte-i18n это работает, _ это магазин, и именно поэтому вы можете сделать следующее в компоненте

 <p>{$_('urls.statuses.ok')}</p>

Пользователь $ создает подписку и получает текущее значение магазина, в котором вы выполняете функцию, чтобы получить данный ключ.

В своем коде вы выполняете _('urls.statuses.ok') функцию, которую пытаетесь выполнить в хранилище, а не в значении хранилища. И именно эта «ценность» на самом деле предоставляет вам функциональность интернационализации.

Однако вы не можете использовать $ в файле javascript, поэтому здесь у вас остается два варианта:

используйте get()

Вы можете import { get } from 'svelte/store' , это даст вам функцию, которая вернет текущее значение магазина, то есть вы можете изменить свой код, чтобы он выглядел следующим образом:

 text: get(_)('urls.statuses.ok')

Одним из недостатков этого является то, что он не создает подписку, или, другими словами, если язык изменится, эта константа не изменится, потому get что не запускается снова, она запускается только один раз.

возвращает функцию из текста

Другой вариант-это немного большее изменение, а именно переопределение text как функции

 text: _ => _('urls.statuses.ok')

Здесь мы передаем хранилище в функцию извне внутри, импортируя его непосредственно в файл javascript. Использование было бы

 <p>{STATUTES.STATUS_OK($_)}</p>

Как вы видите, мы передаем значение хранилища в функцию, что означает, что внутри функции мы можем использовать наш магазин, как и ожидалось, и поскольку при изменении языка этот блок будет повторно оценен, он всегда получит текущий язык вместо исходного, как у нас было get .

Метки: