如何使用Angular.js/JavaScript为我的HTML页面支持多语言

How to support multi language to my HTML page using Angular.js/JavaScript?

本文关键字：HTML 支持 语言 我的 Angular 何使用 js JavaScript      更新时间：2023-09-26

我需要使用Angular.js/JavaScript动态更改HTML页面中所有文本的语言

<h2>Clickable Dropdown</h2>
<p>Click on the button to open the dropdown menu.</p>
<label>Language</label>
<select>
   <option value="">Select langauage</option>
  <option value="1">English</option>
  <option value="2">Spanish</option>
</select>
<form>
  First name:<br>
  <input type="text" name="firstname" placeholder="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname" placeholder="lastname">
</form>

上面有一个下拉菜单，用于选择不同的语言。在这里，我的要求是假设用户选择的语言为spanish，那里出现的所有静态文本都将更改为西班牙语，如果用户再次选择english，所有数据都将重新更改为英语。

需要自动翻译，而不需要手动翻译所有文本。

角度翻译不是你想要的东西吗？

https://github.com/angular-translate/angular-translate

这是一个很好的演示https://angular-translate.github.io/

除了上面的答案，你还可以这样做：

典型的国际化包括抽象出静态字符串，并用所选择的语言动态地呈现它们。

您可以将映射放在JSON文件中，然后根据语言选择进行加载。在下面的示例中，我使用了一个自定义服务localeService，它根据视图中的选择注入对象。

app.service('localeService',['$injector',function($injector){
    return {
    getLocale : function(locale){
        return $injector.get(locale);
    }
  }
}]);

此服务返回我在模块中定义为constants的对象。对象包含不同语言的映射：

app.constant('english',{
    "greeting":"hello",
    "dropDownHeader":"Clickable Dropdown",
     "clickDesc" : "Click on the button to open the dropdown menu."
 });
app.constant('spanish',{
    "greeting":"ola",
     "dropDownHeader":"desplegable se puede hacer clic",
"clickDesc" : "Haga clic en el botón para abrir el menú desplegable."
 });

最后，我以以下方式使用了控制器中返回的对象：

app.controller('mainCtrl',['localeService','$scope',function(localeService,$scope){
  $scope.lang = {};
  $scope.lang.locale = 'english';
  //$scope.template = localService.getLocale();
  $scope.$watch(function(scope){
    return scope.lang.locale;
  },function(newVal,oldVal){
        $scope.template = localeService.getLocale($scope.lang.locale);
  });
}]);

这是一个视图：

<body ng-app="test" >
<div ng-controller="mainCtrl">
<h2>{{template.dropDownHeader}}</h2>
<p>{{template.clickDesc}}</p>
<label>Language</label>
<select ng-model="lang.locale">
   <option value="">Select langauage</option>
  <option value="english">English</option>
  <option value="spanish">Spanish</option>
</select>
  <p>{{template.greeting}}</p>
 </div>
 </body>

以下是完整的工作示例：

相关文章：