簡體   English   中英

如何在服務中使用i18n文件(角度翻譯)?

[英]How to use i18n file in a service (angular-translate)?

我正在使用angular-translate來翻譯我的網站,並且可以正常工作。 但是現在,我想在出現問題(api請求)時顯示一個錯誤對話框。 為此,我創建了一個服務來顯示帶有兩個參數title和錯誤消息的模式。

錯誤消息的一部分是靜態的,因此我可以使用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文件?

非常感謝您的幫助 !

我找到了解決方案。 我剛剛在我的配置中添加了translationPartialLoader提供程序,並指定了查找翻譯的文件夾。

(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')
            );
        }

    }

})();

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM