Angular 翻译管道不工作，无法从 JSON 获取数据

Question

我的 angular 应用程序中有一个名为 RecipeModule 的模块。在这个模块中，我尝试使用翻译管道，但管道不工作。我在 Whosebug 上看到很多 post 有类似的情况，但它对我不起作用。

我的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 { AttractorComponent } from './attractor/attractor.component';
import { HeaderComponent } from './header/header.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 { HttpModule } from '@angular/http';
import { RecipeModule} from './recipe/recipe.module';

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

@NgModule({
  declarations: [
    AppComponent,
    AttractorComponent,
    HeaderComponent,
    ErrorComponent
  ],
  imports: [
    BrowserModule,
    HttpModule ,
    AppRoutingModule,
    HttpClientModule,
    NgxElectronModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    }),
    RecipeModule

  //  StoreDevtoolsModule.instrument({ maxAge: 25, logOnly: environment.production })
  ],
  providers: [TranslateService],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts如下：

import { Component, OnInit } 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(private translate: TranslateService) {
    this.translate.setDefaultLang('en');
  }

  ngOnInit() {

  }

}

recipe.module.ts如下：

import { NgModule } from '@angular/core';
import { RecipeDetailsComponent } from './recipe-details/recipe-details.component';
import { RecipeSearchComponent } from './recipe-search/recipe-search.component';
import { Router, RouterModule } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core';
import { SharedModule } from '../shared/shared.module';

export const RECIPE_ROUTES = [
    { path: 'recipe/search', component: RecipeSearchComponent },
    { path: 'recipe/details', component: RecipeDetailsComponent } 
];

@NgModule({
    declarations:[RecipeDetailsComponent, RecipeSearchComponent],
    imports: [RouterModule.forChild(RECIPE_ROUTES), TranslateModule, SharedModule]
})

export class RecipeModule{}

食谱-search.component.htmls如下：

<div class="container">
  <h1 class="title">
    {{ 'SCREENS.SEARCH.TITLES' | translate }}
  </h1>
</div>
<p>recipe search screen</p>

我的en.json如下：

{
    "SCREENS": {
        "SEARCH": {
            "TITLE": "Recipe Search works"
        },        
        "DETAILS": {
            "TITLE": "Recipe Details works!"
        }
   }
}

我的分享模块如下::

import { TranslateModule, TranslateService } from '@ngx-translate/core';
import { NgModule } from '@angular/core';




@NgModule({
  imports: [TranslateModule.forChild({})],
  exports: [TranslateModule]
})
export class SharedModule {}

在 gui 上，我从屏幕上的段落文本中获取文本，即食谱搜索屏幕，但我无法使用翻译文件从 en.json 中获取数据。我没有收到任何错误，但来自 json 的数据仍然不可见。请帮忙

Answer 1

类似的问题在 Whosebug 上被问了很多次，很多人建议使用共享模块来解决这个问题。但根据 angular 官方文档，共享模块用于优化 angular 应用程序并通过使用共享模块来提高性能，我们将延迟加载 angular 组件。

对我来说，问题不在于翻译管道，这是 html 页面中的一个小错误。

Answer 2

您在 html 中有错字。您在 html 中编写 TITLES，但在 en.josn 中它是 TITLE。

Angular 翻译管道不工作，无法从 JSON 获取数据

Angular translate pipe not working and not able to fetch data from JSON

angular

angular6

angular7

angular8