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.component.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],
})

Answer 2

您可以导出TranslateModule，就像解释in the documentation

一样

@ ngx-translate与不同的模块

2 个答案: