Question

我正在尝试对我的棱角分明的应用程序进行国际化。

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

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

尝试将文件名从English.json更改为en.json。关于路由，请记住，当将组件作为路由去倾斜时，您不在“ patch：”中使用“ /”。

这样声明：

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

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

Answer 2

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

在Angular应用程序中添加国际化

2 个答案: