时间戳

首页 > 解决方案 > 如何全球化 ngx-translate 的翻译管道？

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

问题描述

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

{{ 'title' | translate }}

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

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

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

标签： javascriptangularpipengx-translate

解决方案

您的主模块需要导入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>;
    }
}

推荐阅读