如何全球化ngx-translate的翻译管道？

Question

我正在使用ngx-translate包国际化我的角度应用程序。 使用翻译管道像这样翻译文本

{{ 'title' | translate }}

问题是，当我尝试在应用程序的其他模块中使用此管道时，它会出错。 找不到管道翻译

我尝试使用SharedModule解决该问题，并且可以正常工作，但是，当有很多要使用翻译的模块时，总是仅将SharedModule用于翻译会很烦人

有什么办法可以使翻译管道全球化吗？ 这样我就可以使用模块中任何组件的翻译

Answer 1

您的主模块需要导入TranslateModule.forRoot(transLoader) ，也可以制作单独的模块（例如波纹管）并将其导入到主模块中：

import { NgModule } from '@angular/core';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { AngularFirestore } from '@angular/fire/firestore';
import { FirestoreTranslateLoader } from "./firestore-translate-loader";

export function AngularFireFactory(db: AngularFirestore) {
  return new FirestoreTranslateLoader(db);
}

const transLoader = {
  loader: {
    provide: TranslateLoader,
    useFactory: AngularFireFactory,
    deps: [AngularFirestore]
  }
}

@NgModule({
  declarations: [],
  imports: [
    TranslateModule.forRoot(transLoader),
  ],
})
export class TranslModule { }

所有子模块都需要导入： TranslateModule ，不调用.forRoot() 。 或像下面这样将SharedModule粘贴到SharedModule ：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TranslateModule } from '@ngx-translate/core';

@NgModule({
    declarations: [],
    imports: [
        CommonModule,
        TranslateModule,
    ],
    exports: [
        CommonModule,
        TranslateModule,
    ]
})
export class SharedModule { }

关于我的工厂加载程序，如果您需要从firebase下载翻译：

import { TranslateLoader } from '@ngx-translate/core';
import { Observable } from "rxjs";
import { AngularFirestore } from "@angular/fire/firestore";

export class FirestoreTranslateLoader implements TranslateLoader {
    constructor(private db: AngularFirestore) { }
    getTranslation(lang: string, prefix: string = 'langs'): Observable<any> {
        return this.db.doc(prefix + '/' + lang).valueChanges() as Observable<any>;
    }
}