Angular 2の.pugファイルでi18nを使用する方法はありますか。

Question

Angular 2プロジェクトでi18nを.pugファイルに追加しようとしました。 "./node_modules/.bin/ng-xi18n"コマンドは ".. \ index.ts"のmodule @ angular/core/src/di/metadataを解決できません。 i18nのローカリゼーションと.pugを使用する方法はありますか、またはhtmlは現在のところ唯一の解決策ですか？ありがとう。

Answer 1

はい、angular/cli + ngx-translate + pug-cliを使用します。

まず、TranslationConfigModuleを設定します。翻訳モジュール.config.module.tsという新しいモジュールを作成します。

import { HttpModule, Http } from '@angular/http'; 
import { NgModule, ModuleWithProviders } from '@angular/core'; 
import { TranslateModule, TranslateLoader, TranslateService } from '@ngx-translate/core'; 
import { TranslateHttpLoader } from '@ngx-translate/http-loader'; 

export function HttpLoaderFactory(http: Http) { 
    return new TranslateHttpLoader(http, '../../../assets/i18n/', '.json'); 
} 

const translationOptions = { 
    loader: { 
     provide: TranslateLoader, 
     useFactory: HttpLoaderFactory, 
     deps: [Http] 
    } 
};  

@NgModule({ 
    imports: [TranslateModule.forRoot(translationOptions)], 
    exports: [TranslateModule], 
    providers: [TranslateService] 
}) 
export class TranslationConfigModule { 

    /** 
    * @param translate {TranslateService} 
    */ 
    constructor(private translate: TranslateService) { 
     // Setting up Translations 
     translate.addLangs(['en', 'it']); 
     translate.setDefaultLang('en'); 
     const browserLang = translate.getBrowserLang(); 
     // English and Italian, just an example 
     translate.use(browserLang.match(/en|it/) ? browserLang : 'it'); 
    } 
} 

次に、必要なモジュールにインポートします。今app.module.ts

. . . 

import { TranslationConfigModule } from '../shared/modules/translation.config.module'; 

. . . 

@NgModule({ 
    declarations: [ ], 
    imports: [ 
     TranslationConfigModule 
    ], 
    exports: [ ] 
}) 

、あなたはmyapp/src/assets/i18nにいくつかi18n.json Sを構築する必要があります。 E.G.含まれていますen.json：鉱山Use Jade as angular2 template engineのこの回答の手順に従って

{ 
    "TEST" : { 
     "TITLE" : "Herro Pug!" 
    } 
} 

今セットアップパグ統合。

i18nであなたのパグテンプレートをお楽しみください。もちろん、この翻訳モジュールは、このモジュールをインポートするモジュールで宣言され、エクスポートされたコンポーネントに対してのみ使用できます。

test.pug

h3 {{ 'TEST.TITLE' | translate }}