Добавление интернационализации в угловое приложение - PullRequest
Новая
       23

Добавление интернационализации в угловое приложение

0 голосов
/ 22 июня 2019

Я пытаюсь интернационализировать свое угловое приложение.

app.module.ts: 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';

import { HttpClientModule, HttpClient } from '@angular/common/http';

import { AppComponent } from './app.component';
import { ErrorComponent } from './error/error.component';

// NG Translate
import { TranslateModule, TranslateLoader, TranslateService } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { NgxElectronModule } from 'ngx-electron';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { environment } from '../environments/environment';
import { RecipeDetailsComponent } from './recipe/recipe-details/recipe-details.component'

// AoT requires an exported function for factories
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/locale/', '.json');
}

@NgModule({
  declarations: [
    AppComponent,
    ErrorComponent,
    RecipeDetailsComponent 
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    NgxElectronModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (HttpLoaderFactory),
        deps: [HttpClient]
      }
    }),
    StoreDevtoolsModule.instrument({ maxAge: 25, logOnly: environment.production })
  ],
  providers: [TranslateService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Мой appcomponent.ts выглядит следующим образом: 

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

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

Мой English.json выглядит следующим образом: 

{
    "SCREENS": {
        "HOME": {
            "TITLE": "Home Screen works"
        },        
        "DETAILS": {
            "TITLE": "Recipe Details works!"
        }
   }
}

Мой appcomponent.html выглядит следующим образом: 

<app-header></app-header>
<h1 style="text-align: center;">
   {{ 'SCREENS.HOME.TITLE' | translate }} 
</h1>
<router-outlet></router-outlet>

У меня есть другой компонент для деталей Рецепта, и его HTML-файл выглядит следующим образом: 

<div class="container">
  <h1 class="title">
    {{ 'SCREENS.DETAILS.TITLE' | translate }} 
  </h1>
</div>
<p>recipe etails screen</p>

Класс компонентов моего рецепта: 

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-reservation-search',
  templateUrl: './reservation-search.component.html',
  styleUrls: ['./reservation-search.component.css']
})
export class RecipeDetailsComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

My app-routing.module file is as follows:

    import { NgModule } from '@angular/core';
    import { Routes, RouterModule } from '@angular/router';
    import { RecipeDetailComponent} from './recipe/recipe-details/recipe-details.component';
    import { ErrorComponent } from './error/error.component';

    const routes: Routes = [
      {
        path: '',
        pathMatch: 'full',
        redirectTo: '/first'
      },
      {
        path: 'first',
        component: FirstComponent
      },
      {
        path: 'recipe/details',
        component: RecipeDetailComponent
      },
      {
        path: 'error',
        component: ErrorComponent
      }
    ];

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

когда я запускаю свой код для компонента рецепта, я хочу, чтобы в моем пользовательском интерфейсе работала домашняя страница с надписью «Работает с деталями рецепта». Текст в теге абзаца recipe.details.html виден в графическом интерфейсе, но данные, которые должны быть из English.json, не видны. На данный момент добавлен English.json, позже будет добавлена ​​поддержка других языков. Но хочу знать, как я могу перенести свои данные в GUI согласно файлу English.json. Я думаю, что перевод труб не работает. Как решить эту проблему, чтобы я мог легко добавить интернатализацию и к другим компонентам. Я использую угловой 7.

Ответы [ 2 ]

0 голосов
/ 23 июня 2019

Я думаю, что проблема может быть в модуле, попробуйте удалить TranslateService для списка провайдеров

0 голосов
/ 23 июня 2019

Проблема в наборе неверных инъекций AppComponent 'private translate: TranslateService' в constructor() и использовании this.translate.setDefaultLand('en')

Попробуйте изменить имя файла с English.json на en.json. Что касается маршрутизации, имейте в виду, что вы не используете "/" в "patch:", когда объявляете компонент как маршрут.

объявить так: 

{ path: 'recipe', component: RecipeComponent, children: [
  {path: 'details', component: DetailsComponent }
]}

Когда вы делаете это, вы можете использовать: <router-outlet></router-outlet> в шаблоне рецепта.

...