Angular 4 Ngx-translate管不起作用

Question

I want to make an angular 4 app that is multilangual. I have followed the answer on Angular 2 - Multilingual Support but it doesn't work.

I did every step, from 1 to 5 on that page and my appmodule looks the same.

I have a file en.json in a folder i18n, located in my assets folder. The file contains

{ "TEST":"little test"}

and in my HTML:

 <a [routerLink]="['/home']" class="tile waves-effect waves-light btn-large">
  <span> {{ "TEST" | translate }}</span>
 </a>

And when I use it I get TEST instead of little test. This is really annoying because I want to add multiple languages.

edit
I've added this code to my appmodule.ts (only necessary added)

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

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

@NgModule({
  imports: [
    BrowserModule,
    HttpModule,
    HttpClientModule,
    MaterializeModule.forRoot(),
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    }),
    FormsModule,
    JsonpModule,
    routing,
    BrowserAnimationsModule,
  ],

Answer 1

你能这样试试吗？

export function HttpLoaderFactory(http: Http) { return new TranslateHttpLoader(http, "./assets/i18n/", ".json"); }

Answer 2

First import traslate service to featured module. Inside module constructor use:

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

Answer 3

You have to setup i18n correctly. Which means in the best case these imports in your app.module.ts for ionic4:

// i18n and globalization
import { Globalization } from '@ionic-native/globalization/ngx';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

If you don't know how to install Globalization or why to use see: https://ionicframework.com/docs/native/globalization

You should create this Default loader Method:

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

and Import the Translate Module

imports: [
..., // other stuff above
TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: HttpLoaderFactory,
                deps: [HttpClient]
            }
        }),
... // other stuff beyond
]

Now you can use the Globalization to get infos about the device if on cordova system:

this.globalization.getPreferredLanguage()

or set hard code with pre defined strings the language in the Modules you need.

this.translate.setDefaultLang(locale);
this.translate.use(locale);

But best practice here is to include that stuff into a shared Module and import this module on pages, components etc.

NOTE: Don't forget, if you do not tell the translation Service which language to use, it will ever display the string you try to transform with your translation pipe in the templates and you won't see any errors in the most cases.