带有i18next的NativeScript-语言管道未更新文本

Question

我正在使用NativeScript 6.4.1和Angular 8进行项目。

我想在我的项目中使用i18next库：https://www.i18next.com/

这是我的示例存储库：https://github.com/aubrey-fowler/i18nextTranslationsTest

问题：当我更改语言时，视图未更新翻译-它始终显示英语。为什么没有显示正确的翻译？

我按照此处的指示将库与Angular集成：https://github.com/Romanchuk/angular-i18next

 npm install i18next --save
 npm install angular-i18next --save

这里是代码段：

export class ItemsComponent implements OnInit {

    constructor(@Inject(I18NEXT_SERVICE) private i18NextService: ITranslationService) {

        this.i18NextService.events.languageChanged.subscribe(lang => {
            // do something
            console.log(' i18NextService ', lang); //this code is called
        });

    }

    changeLang(lang: string) {
        this.i18NextService.changeLanguage(lang);
    }

    addLang(lang: string) {
        this.i18NextService.addResourceBundle(lang, 'translation', {
            "greeting": "Hej"
        }, true, false);
    }

}

这是我的观点：

<ActionBar title="{{ 'greeting' | i18next }}"></ActionBar>

<StackLayout>

    <Label text="{{ 'greeting' | i18next }}"></Label>

    <Button text="en" (tap)="changeLang('en')"></Button>
    <Button text="fr" (tap)="changeLang('fr')"></Button>
    <Button text="nl" (tap)="changeLang('nl')"></Button>

    <Button text="add nl" (tap)="addLang('nl')"></Button>

</StackLayout>

Answer 1

我使用i18nextEager管道而不是i18next管道，并且它可以正常工作。

例如

<ActionBar title="{{ 'greeting' | i18nextEager }}"></ActionBar>

<StackLayout>

    <Label text="{{ 'greeting' | i18nextEager }}"></Label>

    <Button text="en" (tap)="changeLang('en')"></Button>
    <Button text="fr" (tap)="changeLang('fr')"></Button>
    <Button text="nl" (tap)="changeLang('nl')"></Button>

    <Button text="add nl" (tap)="addLang('nl')"></Button>

</StackLayout>

此外，您可以添加类似此方法的语言：

addLang() {

    this.i18NextService.addResourceBundle('nl', 'translation', {
        "greeting": "Hej"
    }, true, true);

    console.log(this.i18NextService.languages);
}