Angular ngx-translate gebruik in typoscript

Ik gebruik deze @ngx-translate/core i18n-service en het werkt prima in sjablonen (.html) met deze syntaxis:

{{‘my.i18n.key’|translate}}

Nu wil ik iets vertalen in mijn componenttypescript-bestand (.ts), maar ik weet niet hoe ik het moet gebruiken.

Ik kan een translate-object maken in mijn constructor:

constructor(private translate: TranslateService) {}

en hoe vertaal je nu ‘my.i18n.key’ ?


Antwoord 1, autoriteit 100%

Als je iets in je typoscript-bestand wilt vertalen, doe je het volgende

constructor(private translate: TranslateService) {}

gebruik dan zo waar je wilt vertalen

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

Antwoord 2, autoriteit 49%

Van het document op github:

get(key: string|Array, interpolateParams?: Object):
Waarneembaar: haalt de vertaalde waarde van een sleutel (of een
reeks sleutels) of de sleutel als de waarde niet is gevonden

probeer in je controller/klasse:

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

Antwoord 3, autoriteit 8%

Volg de code om te vertalen in Typscript-bestand

Importeren in kop

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

In constructor declareren als

public translate: TranslateService

Stel dat het JSON-bestand er zo uitziet

{
    "menu":{
        "Home": "Accueil"
            }
}

Declareer de onderstaande code in de constructor.

Opmerking: Sleutel staat voor uw belangrijkste sleutelwaarde die wordt gebruikt in het language.json-bestand (hier is het “menu”)

this.translate.get('menu').subscribe((data:any)=> {
       console.log(data);
      });

Antwoord 4, autoriteit 3%

Ik weet niet of het probleem is wanneer dit werd gepost, maar het toewijzen van de “get”-methode aan een variabele om de vertaalde string te krijgen, zal niet werken, omdat het een waarneembare teruggeeft

get moet als volgt worden gebruikt:

constructor(private translate: TranslateService) { }
   :
   :
this.translate.get ('KEY_TO_TRANSLATE').subscribe (x=> this.translation = x);

Om de string te krijgen, kun je de Instant-methode gebruiken:

this.translation = this.translate.instant('KEY_TO_TRANSLATE')

Dit is echter een synchrone methode, dus als de vertaling nog niet is geladen, krijgt u de sleutel, niet de waarde. Het wordt allemaal uitgelegd in de documentatiedie te vinden is in Github.


Antwoord 5, autoriteit 2%

Dit werkt voor mij (ik gebruik Angular 7).
Importeer gewoon de Translate-service op de constructor en roep het dan vanuit mijn functie als volgt aan:

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

Ik gebruikte de vertaling op een formulier, dus ik geef het door aan de invoer met
setAttribute, ik hoop dat dit voorbeeld kan helpen.


Antwoord 6, autoriteit 2%

Ik gebruik hoek 8 > In mijn geval > Als u een typoscript-tekenreeks in een andere taal wilt vertalen, gebruik dan dit >
Maak eerst een servicebestand om de vertaalwaarde te krijgen. Hieronder vindt u mijn code voor het bestand globaltranslate.service.ts

import { Injectable } from '@angular/core';
import {TranslateService} from '@ngx-translate/core';
constructor(public translate: TranslateService) {}

Maak dan een return-functie……..

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

En in het bestand component.ts kunt u het servicebestand importeren en gebruiken zoals onderstaande code…

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.

Deze oplossing is beter voor alle projecten van i18nen hoekigngx translate

Dit werkt ook op sweetalert2 strings zoals onderstaande code

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

Bedankt voor het lezen. Als je vragen hebt, stuur dan een bericht.


Antwoord 7, autoriteit 2%

U kunt de methode translate.instant() gebruiken en de sleutelnaam doorgeven die is opgeslagen in uw i18n-bestand. bijvoorbeeld:

translate.instant('hello');

en als dat van een parameter of variabele komt, geef de waarde dan direct door.

translate.instant(my.i18n.key);

Je kunt hier ook naar verwijzen:
https://github.com/ngx-translate/core/issues/ 835#issuecomment-384188498


Antwoord 8

errorMessage:string="";
constructor(
    protected translate:TranslateService,
  ) {   
}
  ngOnInit(): void {
   this.translate.get('PLEASE_ENTER_OTP').subscribe(data=>{
      this.errorMessage=data;
    })
  }

Je kunt het waarneembare abonneren in ngOninit

Other episodes