@ngx-使用不同的模块进行翻译

Question

我有很多模块的应用程序。我正在使用 ngx-translate 来实现多语言功能。但是，它不起作用。

i18n.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { TranslateModule, TranslateLoader } from "@ngx-translate/core";
import { TranslateHttpLoader } from "@ngx-translate/http-loader";
import { Http } from "@angular/http";
import { I18NComponent } from "./i18n.component";

@NgModule({
    declarations: [I18NComponent],
    imports: [
        BrowserModule,
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: (http: Http) => new TranslateHttpLoader(http, 'i18n/', '.json'),
                deps: [Http]
            }
        })
    ],
    exports: [I18NComponent]
})

export class I18NModule { }

i18n.组件.ts

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { FormsModule } from '@angular/forms';
declare var jQuery: any;
import { TranslateService } from '@ngx-translate/core';

@Component({
    selector: 'i18n-translate',
    template: `
        <select class="form-control" #langSelect (change)="translate.use(langSelect.value)">
                    <option value="en">English</option>
                    <option value="es">Spanish</option>
                </select>
    `
})
export class I18NComponent {

    constructor(private router: Router, private translate: TranslateService) {
        translate.addLangs(["en", "es"]);
        translate.setDefaultLang('en');

        let browserLang = translate.getBrowserLang();
        translate.use(browserLang.match(/en|es/) ? browserLang : 'en');
    }
}

我在其他模块中使用类似的东西。

@NgModule({
    declarations: [TopnavbarComponent],
    imports: [BrowserModule, RouterModule, FormsModule, I18NModule],
    exports     : [TopnavbarComponent],
})

但是，这会抛出“模板解析错误：无法找到管道‘翻译’ ”错误。

Answer 1

需要在使用翻译管道的地方导入 TranslateModule

改变

@NgModule({
    declarations: [TopnavbarComponent],
    imports: [BrowserModule, RouterModule, FormsModule, I18NModule],
    exports     : [TopnavbarComponent],
})

到

@NgModule({
    declarations: [TopnavbarComponent],
    imports: [BrowserModule, RouterModule, FormsModule, I18NModule, TranslateModule],
    exports     : [TopnavbarComponent],
})