时间戳

首页 > 解决方案 > 角度翻译管道不起作用，无法从 JSON 中获取数据

angular - 角度翻译管道不起作用，无法从 JSON 中获取数据

问题描述

我的 Angular 应用程序中有一个名为 RecipeModule 的模块。在这个模块中，我尝试使用翻译管道，但管道不工作。我在stackoverflow上看到了很多类似情况的帖子，但对我没有用。

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

recipe-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 的数据仍然不可见。请帮忙

标签： angularangular6angular7angular8

解决方案

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

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

推荐阅读