0

三天前，我为一家本地公司启动了一个新的 Angular 项目，他们今天告诉我，他们希望他们的 Web 应用程序使用法语和英语。

所以我发现angular-gettext模块似乎是一个很好的解决方案。

我遵循了他们的官方教程（使用 Grunt），尽管遇到了一些困难，但我还是找到了没有错误的方法......但它仍然对我不起作用！

我将一些文本index.html与指令一起放入文件translate中，以测试我的配置。事实上，这个文件不会包含任何东西，除了<app-root></app-root>应答器。

所以让我们从 myGruntfile.js和它的两个任务开始：

module.exports = function(grunt) {

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    nggettext_extract: {
      pot: {
        files: {
          'po/template.pot': ['src/*.html'] // the index.html file is here
        }
      },
    },

    nggettext_compile: {
      all: {
        options: {
          module: 'myApp'
        },
        files: {
          'src/js/translations.js': ['po/*.po']
        }
      },
    },
  });

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

  // Default task(s).
  grunt.registerTask('extract', ['nggettext_extract']);
  grunt.registerTask('extract', ['nggettext_compile']);
  grunt.registerTask('default', []);
};

我使用以下代码myApp在文件中声明了模块：app.js

var app = angular.module("myApp", [gettext]);

app.run(function (gettextCatalog) {
  gettextCatalog.setCurrentLanguage('fr');
});

因此，当我运行我的grunt nggettext_extract命令时，grunt nggettext_compile一切正常，我po folder的template.pot文件和我js folder的文件都有translations.js。我使用它进行了翻译poedit software，结果是我的fr.po文件。

这是我translations.js生成的文件：

angular.module('myApp').run(['gettextCatalog', function (gettextCatalog) {
  /* jshint -W100 */
  gettextCatalog.setStrings('fr', {"Welcome ladies and gentleman":"Messieurs et Mesdames bienvenues","Welcome to the test zone":"Bienvenue dans la zone de test"});
  /* jshint +W100 */
}]);

本教程希望我将我添加<script>到index.html文件中，但使用angular-cli我将它们添加到我的angular-cli.json文件中：

"scripts": [
    "../node_modules/chart.js/dist/Chart.js",
    "../node_modules/hammerjs/hammer.min.js",
    "../node_modules/angular-gettext/dist/angular-gettext.min.js",
    "./js/translations.js",
    "./app.js"
  ],

所以对我来说，我做了所有事情，我的句子应该是法语而不是英语，但它不起作用......如果你能帮助我，那就太好了！

4

1 回答 1

0

Angular-gettext 适用于 AngularJS（即 1.x），不适用于 Angular（即 2+）。NG 和 angular-cli 具有很棒的内置 i18n 支持，请参阅：https ://angular.io/guide/i18n

于 2018-03-01T17:49:03.620 回答