如何使用TranslationService.setTranslation方法手动定义翻译

Question

我正在使用ng2-translate节点包在一个Angular SPA应用程序中实现翻译。

按照https://www.npmjs.com/package/ng2-translate上的说明(参见第#3节定义翻译)，我在其中一个组件中定义了翻译，如下所示：

import { Component, } from '@angular/core';
import { TranslateService } from 'ng2-translate';


@Component({
    selector: 'home',
    templateUrl: './home.component.html'
})
export class HomeComponent  {


    constructor(private translate: TranslateService) {


        this.translate.setTranslation('en', {
            "HELLO": "Hello World from TranslateServiceLand"
        }, true);

        this.translate.setTranslation('fr', {
            "HELLO": "Bonjour tout le moonde d'TranslateServiceLand"
        }, true);
    }
}

然而，这并不起作用。有没有人能给我举个例子？

Answer 1

使用最新版本的ngx-translate/core

实际上，setTranslation()用于手动设置给定语言的翻译对象。

* @param lang
 * @param translations
 * @param shouldMerge
 */
setTranslation(lang: string, translations: Object, shouldMerge?: boolean): void;

在组件文件夹中创建i18n文件夹

-componentfolder
 -i18nfolder
 -component.html
 -component.ts

component.ts

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

        @Component({
            selector: 'home',
            templateUrl: './home.component.html'
        })

        export class HomeComponent  {

        constructor(translate: TranslateService) { }

         changeLanguage(lang) {
            this.translate.use(lang);
            let i18n = require(`./i18n/${lang}.json`);

            this.translate.setTranslation(lang, i18n, true);
          }
        }

component.html看起来像

<ul class="dropdown-menu" role="menu">
                  <li>
                      <a class="dropdown-item" (click)="changeLanguage('en')">{{"Language.english" | translate}}</a>
                  </li>
                  <li>
                      <a class="dropdown-item"(click)="changeLanguage('es')">{{"Language.spanish" | translate}}</a>
                  </li>
</ul>

希望你知道如何在i18n文件夹中创建json文件。