在 Ionic Framework 6 中找不到翻译 Pipe (ngx-translate)

Question

我想使用 ngx-translate Pipe 来翻译我的离子应用程序。

应用程序模块.ts

export function createTranslateLoader(http: HttpClient): TranslateHttpLoader {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    IonicStorageModule.forRoot(),
    HttpClientModule,
    CookieModule.withOptions(),
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [HttpClient]
      }
    })
  ],
  exports: [TranslateModule],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
  { provide: LocationStrategy, useClass: HashLocationStrategy },
  { provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true }
  ],
  bootstrap: [AppComponent],
})
export class AppModule { }

应用程序组件.ts

  constructor(
    private translate: TranslateService
  ) {

    translate.setDefaultLang('de');
    translate.use('de');
  }

我可以在 app.component.html 中使用 pipe 但不能在我的主页 (home.page.ts) 中使用

我怎样才能解决这个问题？ 我是否必须为 Ionic 制定解决方法？

Answer 1

您需要在要使用翻译 pipe 的特定组件的模块中导入TranslateModule 。对于您的情况，您应该在home.module.ts中添加以下行

import { HomePage } from './home.page';
import { TranslateModule } from '@ngx-translate/core';

@NgModule({
imports: [
...,
TranslateModule
],
declarations: [HomePage]
})
export class HomePageModule {}