Question

我有所有配置和设置以下说明。

app.module.ts

import {  Http } from '@angular/http';
import {TranslateModule, TranslateStaticLoader, TranslateLoader, TranslateService } from 'ng2-translate';

imports: [
    BrowserModule,
    HttpModule,
    TranslateModule.forRoot({
      provide: TranslateLoader,
      useFactory: (http: Http) => new TranslateStaticLoader(http, '/assets/i18n', '.json'),
      deps: [Http]
    })
]

组件：

import {TranslateService,TranslatePipe } from 'ng2-translate';

constructor( private activateRoute: ActivatedRoute, public translate: TranslateService) {
    translate.addLangs(['en']);
    translate.setDefaultLang('en');

  }

并查看组件

{{ 'Intro' | translate }}

此库对我不起作用，它会显示单词Intro的键，而不是值翻译。

控制台中没有任何错误。为什么ngx-translate不起作用或我做错了什么。

Answer 1

查看你的代码并不能说明什么不起作用。我注意到的一个区别是，我使用HttpLoaderFactory doc提供的ngx-translate进行了设置。我将提供完整的设置，您可以将其与您的代码进行比较，如果它有助于检测任何问题：）

设定：

npm install @ngx-translate/core --save
npm install @ngx-translate/http-loader --save

app.module.ts：

// i18n library
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

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

src＆gt;资产＆gt; i18n＆gt; en.json：

{
  "Intro" : "This is intro!"
}

component.ts：

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

export class Component{

  constructor(translate: TranslateService){
    this.translate.setDefaultLang('en');
  }
}

component.html：

{{ 'Intro' | translate }}

Answer 2

如果您仍然使用Angular＆lt; 4.3，请使用@ angular / http中的Http和http-loader@0.1.0。

正在运行

npm install @ngx-translate/http-loader@0.1.0 --save

为我做了伎俩

来源： ngx-translate/core

使用ngx-translate翻译Angular 2？

2 个答案: