无法让ng2-translate在Nativescript/Angular应用程序中发挥作用

Question

我正在尝试构建一个带有国际化的Nativescript/Angular应用程序。我研究了我的选项，发现ng2-translate应该可以做到这一点，再加上nativescript-ng2-translate，它应该可以处理翻译文件的加载。

然而，这似乎不起作用。我创建了一个示例项目，它与我自己的项目具有相同的基本结构。这是一个基于选项卡模板的bog标准原生脚本/角度项目。

translate管道从不做任何事情。直接调用翻译服务也不会产生任何结果。我做错了什么？

代码在这里：https://github.com/JuergenSimon/translation-test

Answer 1

我用nativescript-ng2-translate插件和ngx-translate做了很多测试，但是都不能正常工作。使用带有NativeScript http模块的ng2-translate似乎是目前唯一有效的方法，至少对我来说是这样。我推荐了this来让它正常工作。希望能对你有所帮助！

Answer 2

实际上，我最终还是让它工作了。我遗漏的是在app.component.ts中设置默认语言。所以最终，它看起来是这样的：

app.module.ts：

import { NgModule, NgModuleFactoryLoader, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { NSModuleFactoryLoader } from "nativescript-angular/router";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { TranslateModule, TranslateLoader, TranslateService } from "ng2-translate";
import { TNSTranslateLoader } from "nativescript-ng2-translate";

@NgModule({
    bootstrap: [
        AppComponent
    ],
    imports: [
        NativeScriptModule,
        AppRoutingModule,
        TranslateModule.forRoot({
            provide: TranslateLoader,
            useFactory: () => new TNSTranslateLoader("/assets/i18n")
        })
    ],
    exports: [
        TranslateModule
    ],
    declarations: [
        AppComponent
    ],
    providers: [
        {provide: NgModuleFactoryLoader, useClass: NSModuleFactoryLoader},
        TranslateService
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class AppModule {
}

然后在tabs.module.ts中再次导入TranslateModule

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";

import { BrowseComponent } from "./browse/browse.component";
import { HomeComponent } from "./home/home.component";
import { SearchComponent } from "./search/search.component";
import { TabsRoutingModule } from "./tabs-routing.module";
import { TabsComponent } from "./tabs.component";
import { TranslateModule, TranslateLoader } from "ng2-translate";
import { TNSTranslateLoader } from "nativescript-ng2-translate";

@NgModule({
    imports: [
        NativeScriptModule,
        TabsRoutingModule,
        TranslateModule
    ],
    declarations: [
        TabsComponent,
        HomeComponent,
        BrowseComponent,
        SearchComponent
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class TabsModule {
}

并在tabs.component.ts中设置默认语言：

import { Component, OnInit } from "@angular/core";
import { isAndroid } from "platform";
import { SelectedIndexChangedEventData, TabView, TabViewItem } from "tns-core-modules/ui/tab-view";
import { TranslateService } from "ng2-translate";

@Component({
    selector: "TabsComponent",
    moduleId: module.id,
    templateUrl: "./tabs.component.html",
    styleUrls: ["./tabs.component.css"]
})
export class TabsComponent implements OnInit {
    private _title: string;

    constructor(private translate: TranslateService) {
        translate.setDefaultLang('en');
    }
    ...

最后一步也可以在apps.component.ts中完成。在那之后，管道和翻译服务工作得很好。