无法让 ng2-translate 在 Nativescript/Angular 应用程序中打球答案

【问题标题】：Can't get ng2-translate to play ball in Nativescript/Angular application无法让 ng2-translate 在 Nativescript/Angular 应用程序中打球
【发布时间】：2017-11-19 20:38:58
【问题描述】：

我正在尝试构建具有国际化功能的 Nativescript/Angular 应用程序。我研究了我的选项，发现 ng2-translate 和 nativescript-ng2-translate 应该可以解决问题，它应该处理翻译文件的加载。

但是，这似乎不起作用。我创建了一个与我自己的项目具有相同基本结构的示例项目。这是一个从标签模板构建的沼泽标准 nativescript/angular 项目。

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

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

【问题讨论】：

标签： angular nativescript ng2-translate

【解决方案1】：

我对 nativescript-ng2-translate 插件和 ngx-translate 做了很多尝试，但是无法让它们中的任何一个工作。将 ng2-translate 与 NativeScript http 模块一起使用似乎是目前唯一可行的方法，至少它对我有用。我推荐了this 让它工作。希望对你有帮助！

【讨论】：

【解决方案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 中完成。之后，管道和翻译服务运行良好。

【讨论】：