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: [ ]
})

现在，您需要在i18n.json中构建一些myapp/src/assets/i18n。例如。 en.json将包含：

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

现在按照我的Use Jade as angular2 template engine这个答案的步骤设置哈巴狗整合。

现在用i18n享受你的哈巴狗模板。当然，您只能在要导入此模块的模块中声明和导出的组件上使用此转换模块。

<强> test.pug

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

有没有办法在Angular 2中的.pug文件中使用i18n

1 个答案: