文字列を翻訳する代わりにJSONキーが表示される

Question

何らかの理由で、以下のコードは文字列を翻訳しない、つまりjson KEY（例：MY_NEW_SITES）を表示します。あなたは、私がここで

をやっているものに何かを間違って表示されますホープは、コード

main.ts

<ActionBar [title]="'MY_NEW_SITES' | translate"> 
    <ActionItem (tap)="settings()"> 
    <StackLayout> 
     <Label [text]="'fa-cog' | fonticon" class="fa"></Label> 
    </StackLayout> 
    </ActionItem> 
    <ActionItem (tap)="addSite()" 
     ios.position="right" 
     android.position="popactionBarup"> 
    <StackLayout> 
     <Label [text]="'fa-plus' | fonticon" class="fa"></Label> 
    </StackLayout> 
    </ActionItem> 
</ActionBar> 

    <StackLayout> 
     <Label [text]="'MY_NEW_SITES' | translate"></Label> 
    </StackLayout> 

sites.html

// this import should be first in order to load some required settings (like globals and reflect-metadata) 
    import { nativeScriptBootstrap } from "nativescript-angular/application"; 
    import { AppComponent } from "./app.component"; 

    // angular 
    import { Component, provide } from '@angular/core'; 
    import { HTTP_PROVIDERS } from '@angular/http'; 

    // libs 
    import { TranslateLoader, TranslateService, TranslatePipe } from 'ng2-translate/ng2-translate'; 
    import { TNSTranslateLoader } from 'nativescript-ng2-translate/nativescript-ng2-translate'; 
    import { TNSFontIconService } from 'nativescript-ng2-fonticon'; 

    nativeScriptBootstrap(AppComponent, [ 
     HTTP_PROVIDERS, 
     provide(TranslateLoader, { 
     useFactory:() => { 
      // pass in the path to your locale files 
      return new TNSTranslateLoader('assets/i18n'); 
     } 
     }), 
     TranslateService, 
     provide(TNSFontIconService, { 
      useFactory:() => { 
      return new TNSFontIconService({ 
       'fa': 'font-awesome.css' 
      }); 
      } 
     }) 
    ]); 

site.ts

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

import { TranslateService, TranslatePipe } from 'ng2-translate/ng2-translate'; 

import { TNSFontIconService, TNSFontIconPipe } from 'nativescript-ng2-fonticon'; 
import { TNSTranslateLoader } from 'nativescript-ng2-translate/nativescript-ng2-translate'; 

@Component({ 
    templateUrl: 'pages/sites/sites.html', 
    pipes: [TranslatePipe, TNSFontIconPipe] 
}) 

export class SitesPage { 
    public sites: ISiteInfo[]; 

    constructor(
       private fonticon: TNSFontIconService, 
       translate: TranslateService) { 

    this.sites = []; 
    } 
} 

です

下位アプリ/アセット/ I18N、私は、私の2 JSONファイルを持っているすなわちen.jsonとfr.json

例：

en.json

{ 
    "MY_NEW_SITES": "My New Sites" 
} 

fr.json

{ 
    "MY_NEW_SITES": "Mes nouveaux sites" 
} 

Answer 1

それはありますあなたの資産は MY_NEW_SITESで、文字列は 'MY_NEW_SITES'です。

変更する彼のこの

へ

<StackLayout> 
     <Label [text]="'MY_NEW_SITES' | translate"></Label> 
    </StackLayout> 

<StackLayout> 
     <Label [text]="MY_NEW_SITES | translate"></Label> 
    </StackLayout> 

そして、あなたの問題は、