angular – @ ngx-translate与不同的模块

2019年7月3日 357次阅读

我有许多模块的应用程序.我正在使用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],
})

但是,这会导致“强制解析错误：
无法找到管道’translate’“错误.

最佳答案 需要在使用翻译管道的地方导入TranslateModule

更改

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

至

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