Угловые переводы с помощью ngx-translate / core - PullRequest
Новая
       16

Угловые переводы с помощью ngx-translate / core

0 голосов
/ 11 ноября 2019

Я следую этому уроку (https://alligator.io/angular/ngx-translate/) о переводах на Angular. Когда я вызываю перевод в HTML-файле, ничего не происходит, и я вижу пустую строку:

<label translate='demo.title'></label>

Но в моем component.ts, если я импортирую импорт {TranslateService} from '@ngx-translate/core';, я могу получить правильный перевод, используя: 

title:string;
constructor(private translate: TranslateService) { }
ngOnInit() {

  this.translate.get(['demo.title'])
    .subscribe(translations => {
      this.title = translations['demo.title'];
      console.log(this.title ); // the right translations appears in console
    });
}

app.module.ts 

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


@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HomeModule,
    IndexModule,
    NoPageModule,
    HttpClientModule,
    // ngx-translate and the loader module
    TranslateModule.forRoot({
        loader: {
            provide: TranslateLoader,
            useFactory: HttpLoaderFactory,
            deps: [HttpClient]
        }
    }),
    RouterModule.forRoot(routes, { useHash: true }),
  ],
  providers: [AuthService, AuthGuard],
  bootstrap: [AppComponent],
  schemas:[CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}

// required for AOT compilation
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

pt.json 

{
  "demo": {
    "title": "oi",
    "text": "This is a simple demonstration app for ngx-translate"
  }
}

В связи с этой темой, как мне узнать с языком браузера Angular?

С уважением

1 Ответ

1 голос
/ 11 ноября 2019

Вы забыли предоставить ссылку на свой урок. Тем не менее, похоже, ошибка в вашем html, попробуйте один раз с этим: - 

<label>{{'demo.title'| translate}}</label>

Перейдите по этой ссылке для других способов отображения перевода.

...