在AngularJS的国际化（多语言）中使用po文件

2 年 ago

新, 韵

1 minute

在AngularJS中，通常使用angular-translate进行国际化，但由于我希望使用po文件，因此我搜索了支持po文件的库，发现了angularjs-gettext。

如何使用翻译工具

这和angular-translate的用法一样。唯一的区别是如果对应po文件的键不存在，则会显示以下内容：“你好！”

<h1 translate>Hello!</h1>

这与PHP的gettext具有相同的规范，对吗？

可以使用Grunt提取翻译键。

使用npm安装grunt-angular-gettext

npm install grunt-angular-gettext --save-dev

加载grunt-angular-gettext库。

grunt.loadNpmTasks('grunt-angular-gettext');

从src/view的html文件中提取翻译键，并将其输出到po/template.pot文件中。

grunt.initConfig({
  nggettext_extract: {
    pot: {
      files: {
        'po/template.pot': ['src/views/*.html']
      }
    },
  },
})

使用Grunt将po文件编译，并创建翻译文件translations.js。
※ 您需要在index.html中包含translations.js。

grunt.initConfig({
  nggettext_compile: {
    all: {
      files: {
        'src/js/translations.js': ['po/*.po']
      }
    },
  },
})

参考网站：
https://angular-gettext.rocketeer.be/dev-guide/