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

【问题标题】：How to globalize translate pipe of ngx-translate?如何全球化 ngx-translate 的翻译管道？
【发布时间】：2019-07-18 01:20:48
【问题描述】：

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

{{ 'title' | translate }}

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

我尝试使用SharedModule 来解决问题并且它正在工作，但是，当有很多模块要使用翻译时，我认为总是使用 SharedModule 来翻译很烦人

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

【问题讨论】：

除非您导入声明和导出 pipe 的 module，否则 another module 没有其他方法可以看到“翻译管道”

标签： javascript angular pipe ngx-translate

【解决方案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:

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>;
    }
}

【讨论】：