标签: ngx-translate

我在 app.module.ts 中使用 TranslateHttpLoader 从服务器加载翻译文件，如下所示：

export function createTranslateLoader(http: Http) {
   return new TranslateHttpLoader(http, AppConfig.API_URL+'/static/i18n/', '.json');
}

@NgModule({
  ...

  imports: [

    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [Http]
      }
    }), 

  ],
  ...
})

一切正常，但我想知道是否有办法在加载程序因任何原因（服务器问题、网络连接等）无法检索语言文件时捕获事件，并可能加载带有一些默认翻译字符串的本地 json 文件?

如果第一次加载的应用程序无法获取语言文件，我想捕获此事件，并回退到最小的本地 json 文件以仅显示翻译的维护页面/错误页面或其他内容。

在我的 webapp 中，我使用 ngx-translate 模块进行本地化。它适用于我使用管道翻译的 html 字符串。我的 ts 组件中翻译的字符串有问题。字符串被翻译但如果我重新加载页面它们是空字符串，如果我转到我的应用程序内的其他页面并返回它们再次正常。我定义了方法：

public getTranslation(key: string){
    let str="";
    this.translate.get(key).subscribe(value => {str = value});
    return str;
}

所以当我定义变量时，我使用：

variable: string = this.getTranslation("key-in-my-json-file")

我在 app.module、loader 中的配置：

export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

和进口：

TranslateModule.forRoot({
  loader: {
    provide: TranslateLoader,
    useFactory: (createTranslateLoader),
    deps: [HttpClient]
  }
})

我在 package.json 中的版本：

"@ngx-translate/core": "^8.0.0",
"@ngx-translate/http-loader": "^1.0.2",
"typescript": "2.5.2"

和角度版本 4.3.6

我有一个使用 ngx-translate 的 angular 应用程序。以下版本：

"@angular/core": "5.2.6",
"@ngx-translate/core": "9.1.1",
"@ngx-translate/http-loader": "2.0.1"

在 AppModule 类中，我添加了以下导入：

imports: [
    .....
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [HttpClient]
      }
    })
    ......
]
.....
export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

我创建了一个导出 TranslateModule 的 SharedModule：

exports: [
    // Modules
    TranslateModule,
    ....
]

一切都像魅力一样，除非我刷新放置在与应用程序模块不同的模块中的页面（导入 SharedModule）。在这种情况下，我需要导航回主页（在 AppModule 中编码），一旦我到达主页 ngx-translate 就会返回工作，我可以使用 ngx-translate 重新导航到其他页面。

有谁能够帮助我？提前致谢

更新 似乎问题与我刷新页面时未定义 translateService.currentLang 的事实有关。如果我通过 translateService.use(language) 以编程方式设置 ngOnInit 中的语言，它会起作用。如何通过设置默认的 currentLang 来避免在每个组件中手动设置对 currentLang 变量的检查？

在 HTML 模板中将翻译管道与异步管道一起使用的最佳方法是什么？

例如，假设 'foo' 和 'bar' 有值：

{{ 'foo' | translate: '{ bar: (bar$ | async) }' }}

编译后显示为空。

我在一个巨大的项目中使用ngx-translate 11.x和 angular 7。

使用pipe转换时显示第一个空字符串，使用directive时显示转换字符串的第一个路径。

指导方式：<span [translate]="HELLO'"></span>

管道方式：<span >{{'HELLO'| translate}}</span>

现在，哪个性能更好？

我正在尝试从 ngx-translate 迁移到 Angular i18n 方法，并希望在迁移前确定几点。

1. 是否可以在没有任何模板的情况下在服务和组件内部进行翻译？在 ngx-translate 中，可以使用翻译管道。
2. angular 是否为 V7 引入了任何方法或计划在 v8 中引入用于转换内部组件和服务级别的方法？
3. 这目前是否只能使用变通方法并且没有角度的方法来做到这一点？如果是，我应该使用 angular i18n 方法还是更好地继续使用ng-tranlate包？

提前致谢！

我在 Angular(v6) 中使用 ngx-translate 和延迟加载方法。我面临一个问题translate.instant('Title')

使用翻译管道它工作正常。（{{'Title' | translate}}）

使用translate.instant()默认语言的方法始终有效，但我无法通过共享模块中的语言选择器（选择用于切换语言的组件）更改语言。

不想this.translate.onLangChange.subscribe每次都用，这个方法有没有替代方法？

我们有一个有两种语言的 Angular 应用程序。默认为德语，另一种为英语。我们正在使用ngx-translate作为translateService.

当您刷新浏览器时，应用程序会切换回默认语言。

该switchLang()函数在我们的导航栏中被调用：

<li class="nav-item">
    <a class="nav-link" id="switchLang" (click)="switchLang()">
      <span>
        <i class="fa fa-globe" aria-hidden="true"></i>
        <span>{{'switch-lang' | translate}}</span>
      </span>
    </a>
</li>

组件.ts：

switchLang() {
    this.languageService.switchLanguage();
}

和语言服务：

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

@Injectable({ providedIn: 'root' })
export class LanguageService {

  private language = 'de';

  constructor(private translateService: TranslateService) { }

  getCurrentLanguage() {
    return this.language;
  }

  getLocale() {
    if (this.language === 'en') {
      return 'en_US';
    } else { …

我需要在 Angular 的一个大型项目中实现国际化。根据我的发现，有两个主要选择：Angular 的官方i18n或ngx-translate。

为了了解两者的优缺点，我进行了很多讨论：

https://github.com/angular/angular/issues/16477

https://github.com/ngx-translate/core/issues/495

https://github.com/ngx-translate/core/issues/783

ngx-translate 与 i18n 的差异

现在，第三个选项是“ angular-i18next ”。这方面的文档并不多。我知道它是 i18next 的包装器。但它是否克服了任何缺点，例如：

• 翻译非模板文本。

• 无需重新加载页面的动态翻译。

• 使用 AOT 编译进行单一构建。

或者，我最好的选择是在i18n和ngx-translate之间进行选择？另外，有人在使用“ angular-i18next ”吗？

我已经使用仪表板和设置等页面创建了应用程序。现在我想在更改语言选项时更改整个应用程序的语言。但它仅适用于我在仪表板页面中调用语言更改功能的设置页面。

请高手指点？

设置.ts

import { Component, OnInit } from '@angular/core';
import { TranslateService, LangChangeEvent } from '@ngx-translate/core'

@Component({
  selector: 'app-settings',
  templateUrl: './settings.component.html',
  styleUrls: ['./settings.component.scss']
})
export class SettingsComponent implements OnInit {

  public lang: string;
  constructor(private translate: TranslateService) {
    this.lang = "en";

    translate.setDefaultLang('en');

    let last = localStorage.getItem("selectedLang");
    // the lang to use, if the lang isn't available, it will use the current loader to get them
    translate.use(last);
  }


  changeLanguage(value: string) {

    console.log(value);
    if (value == "German") {
      this.lang = "de";
      localStorage.setItem("selectedLang", …