我想检测浏览器语言并将该浏览器语言用作angularjs应用程序语言

时间:2018-12-27 03:36:00

标签: angularjs

我正在使用angularjs 1.5.5版本,我想自动检测浏览器语言并将应用程序语言翻译成本地浏览器语言

1 个答案:

答案 0 :(得分:0)

您可以使用NavigatorLaguage来检测客户浏览器的语言。 NavigatorLanguage的问题是浏览器兼容性。您还可以使用客户的IP本地化应用程序,例如,如果客户的IP来自德国,则可以以德语提供内容;如果客户的IP来自伊朗,则可以以波斯语提供内容。

angular.module('app', []).controller('localization', function ($scope) {
            $scope.language = window.navigator.language;
        });
.localization-container{
    padding: 2em;
    background: linear-gradient(rgb(239, 239, 239),rgba(177, 177, 177, 0.1));

}
.hello-container{
    padding: .5em;
    background-color: rgb(10, 192, 159);
    color: #fff;

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app">
    <div ng-controller="localization" class="localization-container">
        <p>Your browser languge is: {{language}}</p>
        <hr>
        <p>Sayin hello base on language of your browser:</p>
        <div ng-show="{{IsAvailableLocalLanguage=language=='fa'||language=='fa-IR'}}" >
            <span class="hello-container">سلام</span>
        </div>
        <div ng-show="{{IsAvailableLocalLanguage=language=='de'}}">
            <span class="hello-container">Hallo</span>
        </div>
        <div ng-show="!IsAvailableLocalLanguage">
            <span class="hello-container">Hello</span>
        </div>
        <p>Note: I only supose your local languages beside English be Persian(fa), Persian(fa-IR), and German(de)</p>
    </div>
</div>