如何使用angularjs翻译？答案

【问题标题】：How to use angularjs translate?如何使用angularjs翻译？
【发布时间】：2018-01-27 15:59:50
【问题描述】：

我有两个问题。

1)如何使用 angularjs translate 和 ng-repeat ？

我有 Json 文件，所有文本都可以正常工作，但 ng-repeat 不行。我的 json 片段：

  "rules":{
     "points":[
        {"text":"1"},
        {"text":"2"},
        {"text":"3"}
     ]
  }

我试图写这样的东西，但它不起作用：

<ul ng-repeat="rule in 'rules.points' ">
    <li >{{rule.text | translate}}</li>
</ul>

2) 如何使用 angularjs translate 与 src 和 href？

谁能给我一些例子？

【问题讨论】：

我只是问如何重写并写了我的错误代码，lol）

标签： javascript angularjs json angular-translate

【解决方案1】：

可能的问题 #1：错误的翻译密钥

检查你的 translations.json 文件中的翻译键是否与 rule.text 中的完全相同

可能的问题二：翻译没有及时加载

“翻译”在 {{key | translate}} 是过滤器，过滤器是同步的。这意味着，您的 translations.json（或您正在使用的任何来源）文件中的翻译密钥可能不会在过滤器完成执行时加载。试试这个（异步方式）：

<li translate="{{rule.text}}"></li>

或

<li><span translate="{{rule.text}}"></span></li>

【讨论】：

我试过这个，但出了点问题。在我看来，ng-repeat 的东西是错误的。在控制台中我在 anugularjs 库中有错误，所以这意味着它与 anuglarjs 和解决方案的变体。
你可以写下错误的文本而不是写所有这些:)

【解决方案2】：

首先，如果您真的是指翻译，那么这毫无意义。

您尝试使用的是 Angular 2 或 4 中的管道。所以您应该有这样的东西：

import {Pipe, PipeTransform} from '@angular/core';
   @Pipe ({
   name : 'translate'
})
export class MyPipe implements PipeTransform {
   transform(val : string) : string {
       // number check...
       return (parseInt(val) + 10) + '';
   }
}

如果您的组件知道该类，我认为这应该可以工作。通常管道在它们自己的模块中，所以要确保管道在那里正确导出。

你的第二个问题：

我认为将管道的逻辑部分移动到另一个类（如“PipeFunctions.ts”）中的静态方法是最佳实践。

类似

export class PipeFunctions {
    static translate(val : string) : string {
       return (parseInt(val) + 10) + '';
   }
}

现在翻译可能被管道和组件使用。只需在您的 xyz.component.ts 中实现一个代理方法，例如

translate(val : string) : string {
    return PipeFunctions.translate(val);
}

然后在你对应的 HTML 中：

<a href="translate('1')">whatever</a>

如果不行（抱歉，这里不能查看），试试

<a [href]="translate('1')">whatever</a>

甚至

<a [attr.href]="translate('1')">whatever</a>

【讨论】：