angular - 如何使用 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

组件.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 文件。