Ionic 翻译 ngx-translate

Question

在 ionic 中翻译字符串时，它在调用

en.json

中的一个键时起作用 像这样：

{{ 'key' | translate }}

但不适用于像这样的嵌套键：

{{ 'key1.key2' | translate }}

到目前为止我所做的是创建一个

shared.module.ts

并使用以下代码将其导入到各种需要的页面中：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';

// import ngx-translate and the http loader
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClient, HttpClientModule } from '@angular/common/http';

// required for AOT compilation
export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
  return new TranslateHttpLoader(http, '../../assets/i18n/', '.json');
}

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    RouterModule,
    // ngx-translate and the loader module
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  exports: [
    TranslateModule
  ]
})
export class SharedModule { }

这在

app.component.ts

import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';

import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {

  public languages: string[] = ['en', 'ar'];
  public language: string = this.languages[0];

  public appPages = [];

  constructor(
    public platform: Platform,
    private translate: TranslateService
  ) {
    this.platform.ready().then(() => {
      this.translate.addLangs(this.languages);
      this.translate.setDefaultLang(this.language);
      this.translate.use(this.language);
  });
  }
}

这是我的

en.json

文件：

{
    "app_title": "app title",
    "app_subtitle": "app subtitle",
    "login": {
        "title": "login",
        "subtitle": "login"
    }
}

如前所述

{{ 'app_title' | translate }}

完美 但是

{{ 'login.title' | translate }}

不会在结果会打印键“login.title”而不是实际翻译的地方

PS版本为：

"@ngx-translate/core": "^14.0.0",
"@ngx-translate/http-loader": "^7.0.0",

Answer 1

修复是将代码

in shared.module.ts

移动到

app.module.ts

.

要移动的代码是：

// import ngx-translate and the http loader
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClient, HttpClientModule } from '@angular/common/http';

// required for AOT compilation
export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
  return new TranslateHttpLoader(http, '../../assets/i18n/', '.json');
}
NgModule({
  declarations: [AppComponent],
  imports: [
    ...,
     // ngx-translate and the loader module
     HttpClientModule,
     TranslateModule.forRoot({
       loader: {
         provide: TranslateLoader,
         useFactory: HttpLoaderFactory,
         deps: [HttpClient]
       }
     }),
    SharedModule
  ],

我们应该像这样将 TranslateModule 添加到所有页面的导入中：

imports: [
  ...,
  TranslateModule
]