有沒有辦法在Angular 2中的.pug文件中使用i18n

Question

我試圖在.pug文件中的Angular 2項目中添加i18n。 “./node_modules/.bin/ng-xi18n”命令失敗，“無法解析模塊@ angular / core / src / di / metadata from”.. \\ index.ts“”。 有沒有辦法使用i18n本地化和.pug或html是現在唯一的解決方案？ 謝謝。

Answer 1

是的，使用angular / cli + ngx-translate + pug -cli將完成工作。

首先，設置您的TranslationConfigModule 。 創建一個名為translation.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 。 EG en.json將包含：

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

現在按照我的答案中的步驟設置pug集成使用Jade作為angular2模板引擎 。

現在用i18n享受你的哈巴狗模板。 當然，只能在要導入此模塊的模塊中聲明和導出的組件上使用此轉換模塊。

test.pug

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