向 Angular 应用程序添加国际化

Question

我正在尝试将我的 Angular 应用程序国际化。

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 { }

当我为配方组件运行代码时，我希望在我的 UI 上显示“配方详细信息有效”行，并且主屏幕有效。 recipe.details.html 的段落标签中的文本在 GUI 上可见，但应该来自 English.json 的数据不可见。 截至目前 English.json 添加将在以后添加对其他语言的支持。但是想知道如何根据 English.json 文件将我的数据带到 GUI 上。我认为翻译管道不起作用。如何解决它，以便我可以轻松地在其他组件上添加国际化。我正在使用角度 7。

Answer 1

问题在于constructor() 中的AppComponent 错误注入集'private translate: TranslateService' 并使用this.translate.setDefaultLand('en')

尝试将文件名从 English.json 更改为 en.json。关于路由，请记住，在将组件拒绝为路由时，您没有在“补丁：”中使用“/”。

这样声明：

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

当你这样做时，你可以在你的食谱模板中使用：<router-outlet></router-outlet>。

Answer 2

我认为问题可能出在模块中，请尝试删除提供者列表中的TranslateService