Угловое использование ngx-translate в машинописном тексте

Я использую этот сервис @ngx-translate/core i18n, и он отлично работает в шаблонах (.html) с помощью этого синтаксиса:

{{ 'my.i18n.key' | перевести}}

Теперь я хочу перевести что-то в свой файл машинописных файлов (.ts), но я не знаю, как его использовать.

Я могу создать перевод объекта в моем конструкторе:

конструктор (частный перевод: TranslateService) {}

и теперь, как перевести 'my.i18n.key'?

Ответ 1

Из документа на github:

get (key: string | Array, interpolateParams?: Object): Observable: Получает переведенное значение ключа (или массива ключей) или ключа, если значение не было найдено

попробуйте в своем контроллере/классе:

constructor(private translate: TranslateService) {
    let foo:string = this.translate.get('myKey');
}

Ответ 2

Чтобы перевести что-то в свой машинописный файл, выполните следующие действия.

constructor(private translate: TranslateService) {}

затем используйте так, как вам нужно, чтобы перевести

this.translate.instant('my.i18n.key')

Ответ 3

Это работает для меня (я использую Angular 7). Просто импортируйте службу Translate в конструктор, а затем вызовите ее из myfunction следующим образом:

  getTranslation(){
    let translation = "";
    let clientTranslation = this.translate.get('auth.client').subscribe(cliente =>{
        translation = cliente;
        document.getElementById("clientTest").setAttribute('value', translation);
    }
}

Я использовал перевод в форме, поэтому я передаю его на вход setAttribute, надеюсь, этот пример может помочь.

Ответ 4

Я использую Angular 8> В моем случае> Если вы хотите перевести строку машинописи на другой язык, используйте это> Сначала создайте служебный файл для получения значения перевода. Ниже приведен мой код для файла globaltranslate.service.ts

import { Injectable } from '@angular/core';
import {TranslateService} from '@ngx-translate/core';

constructor(public translate: TranslateService) {}

Затем сделайте функцию возврата........

getTranslation(str) {
    const currentLang = this.translate.currentLang; // get current language
    const returnValue = this.translate.translations[currentLang][str]; // get converted string from current language
    if (returnValue === undefined) {
      return this.translate.translations.en_merch[str]; // if value is getting undefined then return default language string, en_merch is default english language file here
    } else {
      return returnValue;
    }
  }

А в файле component.ts вы можете импортировать служебный файл и использовать его, как показано ниже:

import {GlobaltranslateService} from '../../../../services/globaltranslate.service';

@Component({
  selector: 'app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [GlobaltranslateService]   // add service in provider
})

constructor(
      private gTranslate: GlobaltranslateService // add service into constructor
  ) {}

const title = this.gTranslate.getTranslation('Title text'); // get return value by calling function 'getTranslation' in globaltranslateservice.

Это решение лучше для всех проектов i18n и angular ngxtranslate

Это также работает со строками sweetalert2, как показано ниже кода

Swal (
   this.gTranslate.getTranslation('Warning'),
   data.message,
   'warning'
);

Спасибо за чтение, если у вас есть запрос, пожалуйста, сообщение.

Ответ 5

У вас есть в основном 3 варианта

Если вы абсолютно уверены, что ваши файлы переводов уже загружен, и вы не хотите обновлять переводы автоматически если язык меняется, используйте translate.instant('ID').
Если вы не уверены в состоянии загрузки, но вам не нужно обновления по языковым изменениям используют translate.get('ID'). Это дает вам наблюдаемый, который возвращает перевод после его загрузки и завершает наблюдаемое.
Если вы хотите постоянные обновления (например, при смене языка) используйте translate.stream('ID') - возвращает наблюдаемое, которое испускает Обновления перевода. Обязательно избавьтесь от наблюдаемого, если вы больше не нужно.

Э.Г.

 export class AppComponent {
        constructor(translate: TranslateService) {
            translate.get('hello.world').subscribe((text:string) => {console.log(text});
        }
    }

/** Where 'hello.world' is a key in your file for the change of language **/