【问题标题】:How to use i18n file in a service (angular-translate)?如何在服务中使用 i18n 文件(角度翻译)?
【发布时间】:2017-05-11 16:18:31
【问题描述】:

我正在使用 angular-translate 来翻译我的网站,它可以正常工作。但是现在,我想在出现问题(api 请求)时显示一个错误对话框。为此,我创建了一个服务来显示带有两个参数标题和错误消息的模式。

错误信息的一部分是静态的,所以我可以直接用 angular-translate 翻译它。

这是我的服务(errorModal.service.js):

(function () {
    'use strict';

    angular
        .module('app.core.project')
        .factory('errorDialog', ['$mdDialog', '$document', '$translatePartialLoader', '$translate', errorDialog]);

        /** @ngInject */
    function errorDialog($mdDialog, $document, $translatePartialLoaderProvider, $translate)
    {
        var service = {
            displayError : displayError
        };

        // path to i18n folder : /app/core-project/services/i18n/{lang}.json but it can't be used...
        $translatePartialLoaderProvider.addPart('/app/core-project/services/');

        return service;

        function displayError(title, errorMessage, clickOutsideToClose)
        {
            // error_modal.message isn't translated
            var message = $translate.instant('error_modal.message') + errorMessage;
            console.log(message); // show "error_modal.message"

            $mdDialog.show(
                $mdDialog.alert()
                    .parent(angular.element($document.body))
                    .clickOutsideToClose(clickOutsideToClose)
                    .title(title)
                    .htmlContent(message)
                    .ariaLabel(title)
                    .ok('OK')
            );
        }

    }

})();

如何在此服务的特定路径中使用 i18n 文件?

非常感谢您的帮助!

【问题讨论】:

    标签: javascript angularjs internationalization angular-translate


    【解决方案1】:

    我找到了解决方案。我刚刚将 translatePartialLoader 提供程序添加到我的配置中,指定了可以找到翻译的文件夹。

    (function ()
    {
        'use strict';
    
        angular
            .module('app.core.project')
            .config(config);
    
        /** @ngInject */
        function config($translatePartialLoaderProvider)
        {
            // Put your custom configurations here
    
            $translatePartialLoaderProvider.addPart('app/core-project/services');
        }
    
    })();
    

    还有我的 errorModal.service.js

    (function () {
        'use strict';
    
        angular
            .module('app.core.project')
            .factory('errorDialog', ['$mdDialog', '$document', '$translate', errorDialog]);
    
            /** @ngInject */
        function errorDialog($mdDialog, $document, $translate)
        {
            var service = {
                displayError : displayError
            };
    
            return service;
    
            function displayError(statusCode, errorMessage)
            {
                var clickOutsideToClose = false;
    
                var title = $translate.instant('core_project.dialog.error.status_code', { statusCode: statusCode });
                var message = $translate.instant('core_project.dialog.error.message', { message: errorMessage });
    
                $mdDialog.show(
                    $mdDialog.alert()
                        .parent(angular.element($document.body))
                        .clickOutsideToClose(clickOutsideToClose)
                        .title(title)
                        .htmlContent(message)
                        .ariaLabel(title)
                        .ok('OK')
                );
            }
    
        }
    
    })();
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2021-04-26
      • 1970-01-01
      • 1970-01-01
      • 2015-12-19
      • 2018-11-29
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多