标签: ngx-translate

我在Angular应用程序中使用ngx-translate进行翻译.它通过简单的项目设置工作得很好,但我们开发了一个大型业务应用程序,不同的组件被分成几个单独的库.

有些图书馆需要有一些翻译,当然,只需点击同一个按钮,即可对应用的所有部分进行翻译.

使用angular-librarian捆绑组件库到目前为止,我还没有成功为ngx-translate顶级Angular-Cli项目和包含的角度库管理库创建一个实例.

我一直在使用基本上各种输入组合的试了几个项目的设置ngx-translate与forRoot()和/或forChild()没有成功.我总是有一个缺少的提供者,文本出现但语言没有一起改变或根本没有.pp.

有谁拉过这个并且可以显示一个有效的项目设置示例/ plunkr？

我的问题是关于 ngx 在 Angular2 中的翻译。我的项目支持 2 种语言：英语和阿拉伯语，因此有 en.json 和 ar.json 文件。下面的代码将根据我当前的语言为我提供键的翻译值

this.translate.get('key').subscribe((msg: string) => {
    console.log(msg);
  }

问题：如何传递特定语言作为输入并获得该特定语言的翻译？例如，我当前的语言是英语（并且不想更改当前语言），但从 ts 文件中，我需要从 ar.json 检索密钥的阿拉伯语翻译，而不更改当前语言。

我正在写一个使用@ngx-translate的角度应用程序.使用TranslateModule.forRoot(...)我提供了TranslateLoader:

@NgModule({
  imports: [
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient, ConfigService, LogService]
      }   
    })     
  ]
})

我还有一个ConfigService,它使用APP_INITIALIZER加载一个config.json.

问题是,TranslateLoader需要配置中的url.但是forRoot()在APP_INITIALIZER之前运行,导致ConfigService没有加载配置和空URL.

还有另一种方法吗？

目前我正在考虑手动引导角度.

如果它是静态测试，则可以获取该值，但是每当我尝试获取转换后的值（使用ngx-translate）时，它都是空的。

<div id="header-title">
    <h1>{{ 'MENU_TITLE' | translate | uppercase }}</h1>
</div>

这有效并返回Test

<div id="header-title">
    <h1>Test</h1>
</div>

规格

it('should translate a string using the key value', () => {
    fixture = TestBed.createComponent(NavComponent);
    const title = fixture.nativeElement;
    console.log(title.querySelector('#header-title h1').innerHTML);
});

导入翻译模块

beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [RouterTestingModule,
                TranslateModule.forRoot({
                    loader: {
                        provide: TranslateLoader,
                        useFactory: HttpLoaderFactory,
                        deps: [HttpClient]
                    }
                }),
                HttpClientModule
            ],
            declarations: [NavComponent]
        }).compileComponents();

        injector = getTestBed();
        translate = injector.get(TranslateService);
    }));

----- FIXED -----但不确定这是否是正确的方法

let fixture: ComponentFixture<NavComponent>;

it('should …

我正在使用 ngx-translate 来翻译我的 Angular Web 应用程序，但似乎 ngx-translate 的功能存在问题getTranslation(language)。当它被调用时，它会改变当前的语言？暂时？然后我的组件没有以正确的语言显示。

export class InputRadioComponent extends FormComponentInput implements OnInit {
  constructor(protected formDynamicS) {
  }

  public ngOnInit() {
    this.translate.getTranslation("fr").subscribe(res => {
      this.choose["fr"] = res['form-component']['choose-answer'];
    });
    this.translate.getTranslation("en").subscribe(res => {
      this.choose["en"] = res['form-component']['choose-answer'];
    });
    this.translate.getTranslation("de").subscribe(res => {
      this.choose["de"] = res['form-component']['choose-answer'];
    });
  }
}

在这种情况下，就像this.translate.getTranslation("de")最后一次调用一样，我的组件始终以德语显示。我找到了一种解决方法，但这不是我想保留在我的代码中的东西。这是我的解决方法：

let languages: string[] = ["fr", "en", "de"];

languages.splice(languages.indexOf(this.translate.currentLang));
languages.push(this.translate.currentLang);

languages.forEach((language) => {
  this.translate.getTranslation(language).subscribe(res => {
    this.choose[language] = res['form-component']['choose-answer'];
  });
});

它允许我保留 currentLang，因为它将是最后一次调用 getTranslation

我想在我的前端使用 ngx-translate 在应用程序加载时动态加载翻译。

我的后端以 JSON 格式返回响应，例如：

{
   "something: "something"
}

我想在我的 TranslateLoader 上使用该输出而不是本地en.json文件。

有什么方法可以实现吗？

TL;DL：我想调用“ http://localhost:xxxx/api/translation/EN ”来获取翻译的 JSON 响应并将其加载TranslateHttpLoader

我在 Angular 应用程序中使用 ngx-translate。

我的 HTML 模板：

<span [ngClass]="(role === 'ADMIN') ? 'badge badge-danger' : 'badge badge-success'">{{ 'ADMIN.USER.ROLES.' + role | translate }}</span>

我的 i18n json 文件：

"ADMIN": {
  "USER": {
    "ROLES": {
      "ADMIN": "Administrator",
      "FOO": "Auditor FOO",
      "DOO": "Auditor DOO",
      "ROO": "Auditor ROO",
      "unknown": "Unknown"
    }
  }
}

如果我的角色是BIPBIP，我想使用“ADMIN.USER.ROLES.unknown”键。

我正在寻找 HTML 模板解决方案（不是 Javascript）：

this._translateService.get("app.key").subscribe(res=>{
    if(...) {
        // message does not exist
    }
    else {
        // message exists
    }
}))

我需要使用 ngx-core 中的 TranslateService.instant 并传递参数来进行字符串插值。
到目前为止，我已经完成了：

MY_STRING: "Welcome {{user}}"

在我的组件中，我这样做：

translateService.instant(MY_STRING, {user: 'Nick'})

我从中得到的是：

Welcome {{user}}

参数 user 没有内插。我究竟做错了什么？

有没有办法使用 ngx-translate 翻译 css 选择器(::after, ::before) 内容？

.custom-file-label::after {
    content: "Browse"
}

我已经在我的应用程序中安装了@ngx-translate/core版本 14.0.0 和@ngx-translate/http-loader版本 ^7.0.0，并遵循了一些关于如何向 Angular 站点添加多种语言的教程（例如this ）。我的 Angular 版本是 11.2.10。

当我成功完成所有步骤后，出现此错误。我尝试了多种方法，例如更新版本，但都没有解决问题。

有谁知道如何解决这个问题？

Error: node_modules/@ngx-translate/core/lib/missing-translation-handler.d.ts:34:21 - error TS2694: Namespace \'"/home/tk18d/Desktop/archivdatenbank/source/frontend-ng/node_modules/@angular/core/core"\' has no exported member \'\xc9\xb5\xc9\xb5FactoryDeclaration\'.\n34     static \xc9\xb5fac: i0.\xc9\xb5\xc9\xb5FactoryDeclaration<FakeMissingTranslationHandler, never>;\n                       ~~~~~~~~~~~~~~~~~~~~\nError: node_modules/@ngx-translate/core/lib/missing-translation-handler.d.ts:35:22 - error TS2694: Namespace \'"/home/tk18d/Desktop/archivdatenbank/source/frontend-ng/node_modules/@angular/core/core"\' has no exported member \'\xc9\xb5\xc9\xb5InjectableDeclaration\'.\n35     static \xc9\xb5prov: i0.\xc9\xb5\xc9\xb5InjectableDeclaration<FakeMissingTranslationHandler>;\n                        ~~~~~~~~~~~~~~~~~~~~~~~\nError: node_modules/@ngx-translate/core/lib/translate.compiler.d.ts:12:21 - error TS2694: Namespace \'"/home/tk18d/Desktop/archivdatenbank/source/frontend-ng/node_modules/@angular/core/core"\' has no exported member \'\xc9\xb5\xc9\xb5FactoryDeclaration\'.\n12     static \xc9\xb5fac: i0.\xc9\xb5\xc9\xb5FactoryDeclaration<TranslateFakeCompiler, never>;\n                       ~~~~~~~~~~~~~~~~~~~~\nError: node_modules/@ngx-translate/core/lib/translate.compiler.d.ts:13:22 - error TS2694: Namespace \'"/home/tk18d/Desktop/archivdatenbank/source/frontend-ng/node_modules/@angular/core/core"\' has no exported member \'\xc9\xb5\xc9\xb5InjectableDeclaration\'.\n13 …