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

Question

我正在使用

ngx-translate

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

{{ 'title' | translate }}

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

我尝试使用

SharedModule

来解决问题并且它有效，但是，我认为当有很多模块需要使用translate时总是使用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

：

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

Answer 2

使用这个，它会起作用，或者你可以在 component.ts 中的装饰器的导入中导入 TranslateModule，如果standalone为true

import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
     loader: {
     provide: TranslateLoader,
     useFactory: HttpLoaderFactory,
     deps: [HttpClient]
    }
  })
 ],
 providers: [],
 bootstrap: [AppComponent]
})

export class AppModule {}