6

我有许多模块的应用程序。我将 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],
})

但是，这会引发“模板解析错误：找不到管道'翻译' ”错误。

4

3 回答 3

3

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

改变

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

至

@NgModule({
    declarations: [TopnavbarComponent],
    imports: [BrowserModule, RouterModule, FormsModule, I18NModule, TranslateModule],
    exports     : [TopnavbarComponent],
})
于 2017-05-25T13:31:30.863 回答
0

您可以导出TranslateModule，如文档中所述

于 2017-09-19T13:52:03.013 回答
0

在共享模块中使用 forChild

   imports: [
        BrowserModule,
        TranslateModule.forChild({
            loader: {
                provide: TranslateLoader,
                useFactory: (http: Http) => new TranslateHttpLoader(http, 'i18n/', '.json'),
                deps: [Http]
            }
        })
    ],

还要在您的鬃毛模块提供程序中添加 TranslateStore

providers: [TranslateStore]
于 2021-12-02T15:49:14.520 回答