标签: angular-translate

我看了一下逃逸角的方式默认一切和$sce,所以我白名单的数据与$sce.trustAsHtml()通过过滤器(因为$sce没有在服务工作),就像这样:

<sup class="ng-binding" ng-bind-html="row|logEntry"></sup>

但问题是,我不相信HTML的某些部分.

深入研究细节 - 我的翻译中包含HTML,但它们中包含可替换的标记/变量.所以翻译支持HTML,但我不希望提供的令牌包含HTML.

我的过滤器logEntry内部看起来像这样:

var translated = $translate('Log.' + msg.context.entity_type) + '.' + msg.context.action, {
        'object_name': msg.context.object_name,
        'user': msg.context.user_name
});
return $sce.trustAsHtml(translated);

例如,我可以翻译有关userX更改文章的内容,但如果用户名称包含,我不希望结果文本触发alert() <script>alert('evilname')</script>

$translate它本身是不相关的,它可以是任何HTML字符串,我希望某些部分被常规JS替换.replace(),内容保持"作为文本".

所以我的问题是 - 如何逃避HTML的部分内容？我是否必须在视图内部分切片？或者我是否必须采用自定义转义( 最快的方法将HTML标记转义为HTML实体？)？这种事情是否有首选做法？

您好我需要根据值进行复数翻译,但无法找到如何做到这一点.

例如,我有变量peopleCount.

1. peopleCount = 1翻译应该是:英语:{{ peopleCount }} person likes this立陶宛语:{{ peopleCount }} zmogus tai megsta
2. 如果peopleCount超过1英文翻译将是:{{ peopleCount }} people like this.

但对于立陶宛语翻译:

3. 如果peopleCount是2到9之间或任何以这些数字结尾的数字,除了以第4个规则提供的数字结尾的数字(例如:225,249,210 <---这些是正确的数字.并且不正确的数字:215,250 ... ).这将是{{ peopleCount }} zmones tai megsta
4. 如果计数在10到20或30之间,40或任何其他以零或150或90结尾的数字,那将是 {{ peopleCount }} zmoniu tai megsta

我该如何做到这一点？

如何检测其他组件中的语言变化？我的检测是在标头组件中进行的。我的目标是检测语言变化并设置样式。

子组件：

import { TranslateService } from "ng2-translate";
export class ChildComponent{
    public browserLang: string;
    constructor(private translate: TranslateService) {
        this.browserLang = translate.getBrowserLang();
    }
}

儿童的HTML：

<div ng-class="{black: browserLang == 'en', red: browserLang == 'de'}" >

结果是：未添加类。如果我输出语言字符串（en）是正确的。但是它没有听任何更改。如何使其听和改变课堂？

我想在翻译中使用变量,但我不知道如何在我的模板中使用它.

在我的HTML模板中:

 <md-input-container class="md-block">
                <md-autocomplete md-no-cache="vm.noCache" 
                                    md-search-text="user.searchUser" 
                                    md-items="userItem in vm.querySearch(user.searchUser)" 
                                    md-item-text="userItem.display"
                                    md-selected-item-change="vm.selectedItemChange(userItem, user)"
                                    md-min-length="0"
                                    required>
                    <md-item-template>
                        <span md-highlight-text="user.searchUser" md-highlight-flags="^i">{{userItem.display}}</span>
                    </md-item-template>
                    <md-not-found>
                        {{ 'user.autocomplete.no_user' | translate:'{ username: user.searchUser }' }}

                    </md-not-found>
                </md-autocomplete>
            </md-input-container>

和我的翻译文件(json):

"user": {
            "autocomplete": {
        "no_user" : "No user has been found ({{username}})",
     }
}

如何使用user.searchUser显示该消息？

非常感谢 !

这是小提琴

是否有可能在angular-translate中检查其他语言中的键值是否不可用,那么它是否可以从另一种语言中提取该键值？就像在例子中我有英语和西班牙语.并且一个键值(示例中为"CONFIRM_LABEL")不支持西班牙语.是否可以从英文版中提取数据？

HTML

<div name="info" ng-controller="myctrl">
    <label translate="TERMS_LABEL"></label>
    <h4 translate="ZIPCODE_LABEL"></h4>
    <p translate="LAST_NAME"></p> 
    <p translate="CONFIRM_LABEL"></p>
  <button type="submit"  ng-click="changeLanguage('de')" >Spanish</button>
   <button type="submit"  ng-click="changeLanguage('en')" >English</button>

JS

    var demo = angular.module('demo', ['pascalprecht.translate']);
   demo.controller('myctrl',function ($scope,$translate) 
       {
        $scope.changeLanguage = function (key)
        {
         $translate.use(key);
        };
 })

 demo.config(function ($translateProvider) {
   $translateProvider.translations('en', {

        "TERMS_CONDITIONS":"TERMS & CONDITIONS",
        "TERMS_LABEL":"TERMS",
       "ZIPCODE_LABEL":"ZIP CODE",
       "LAST_NAME":"Last Name",
       "CONFIRM_LABEL": "Confirm Number ",

    })
   .translations('de', {

            "TERMS_LABEL": "Términos",
            "FORM_LABEL": "Información ",
            "LAST_NAME": "Apellido",
            "ZIPCODE_LABEL": "Código Postal"
   });
    $translateProvider.preferredLanguage('en');

})

我在第一次加载时出现文本闪烁的问题.

我尝试了我在互联网上找到的所有解决方案,但没有一个能够工作......

我的angular-translate版本是最新的2.4.2.

这是HTML示例:

<!DOCTYPE html>
<html ng-app="testapp">
<head>
    <title translate-cloak>{{ 'page.appName' | translate }}</title>
    <base href="/">
    <meta charset="utf-8">
    <link rel="icon" type="image/ico" href="static/favicon.ico"/>
    <link rel="stylesheet" href="stylesheets/style.css"/>
</head>
<body>
<div>
    <ul>
        <li>
            <div>
                <a href="/"><strong translate-cloak>{{ 'page.appName' | translate }}</strong></a>
            </div>
        </li>
    </ul>
</div>
<div ng-view></div>
<script src="javascripts/angular.js"></script>
<script src="javascripts/angular-translate.js"></script>
<script src="javascripts/angular-translate-loader-url.js"></script>
<script src="javascripts/angular-translate-loader-static-files.js"></script>
<script src="javascripts/angular-translate-storage-local.js"></script>
<script src="javascripts/test.js"></script>
</body>
</html>

这是JavaScript:

angular.module('testapp', ['ngRoute', 'ngResource', 'ngCookies', 'ngTable', 'mgcrea.ngStrap', 'pascalprecht.translate'])
        .config(['$locationProvider', '$routeProvider', '$httpProvider', '$translateProvider',
            function ($locationProvider, $routeProvider, $httpProvider, $translateProvider) {
                $locationProvider.html5Mode(true);
                $routeProvider.when('/', { …

我想在“小”标签内使用 Angular Translate 在中继器上连接一个字符串来放置描述。我应该做什么？

<li ng-repeat="subtype in type">
    <label>
        <input type="radio" name="radioType" ng-value="subtype" ng-model="dialogModel.type"> 
        {{ subtype.name }} <small>{{ 'subtype.name + "_DESCRIPTION"' | translate }}</small>
    </label>
</li>

现在它向我显示了一个文字字符串，我不知道如何连接一个 Angular Translate 字符串。

我正在尝试使用"翻译"我的角度应用程序angular-translate.但是,我坚持使用一般化的翻译plural.

index.html包括:

<script src="assets/libs/angular-1.5.7/angular.js"></script>
<script src="assets/libs/angular-1.5.7/angular-message-format.js"></script>
<script src="assets/libs/message-format-1.0.0-rc3/messageformat.js"></script>
<script src="assets/libs/angular-translate-2.11.1/angular-translate.js"></script>
<script src="assets/libs/angular-translate-2.11.1/angular-translate-loader-static-files.js"></script>
<script src="assets/libs/angular-translate-2.11.1/angular-translate-interpolation-messageformat.js"></script>

然后,我配置角度转换:

angular.module('app').config(['$translateProvider', function ($translateProvider) {

    // Language files folder definition
    $translateProvider.useStaticFilesLoader({
        prefix: 'app/resources/locale-',
        suffix: '.json'
    });

    // Default language
    $translateProvider.preferredLanguage('fr_FR');

    // TODO does logging missing key to console should be activated in production?
    $translateProvider.useMissingTranslationHandlerLog();

    //$translateProvider.useMessageFormatInterpolation();

    // Force not using sanitizer (to avoid security warning)
    $translateProvider.useSanitizeValueStrategy(null);
}])

然后,我在静态文件中定义一些翻译键:

{   
    "drivers.results.noresult" : "No result",
    "drivers.results.oneresult" : "One result",
    "drivers.results.nresults" : "{{length}} results"
}

我尝试使用复数语法翻译消息: …

案子

我正在将AngularJS(即Angular 1.6)应用程序升级到Angular(即Angular 4.1.3).我选择进行增量升级,因此目前AngularJS和Angular都是自举和运行的.到目前为止这么好,但是:应该重写为Angular的AngularJS服务之一依赖于众所周知的服务$translate,该服务是第三方AngularJS(读取Angular 1)模块pascalprecht.translate的一部分.换句话说,$translate注入服务MyService应该成为Angular(读取Angular 4)服务.

MyService (剥离)看起来像这样:

import { Injectable } from '@angular/core';

@Injectable()
export class MyService {
    // Here comes the injection (how to do it?).
    constructor(private $translate: $translate) {

    }

    foo() {
        // Use the service
        this.$translate('HELLO_WORLD');
    }
}

它位于MyModule:

import { NgModule } from '@angular/core';

import { MyService } from './my.service';

@NgModule({
    providers: [
        MyService
    ]
})
export class MyModule {
}

问题

现在,我怎么能注入$translate到 …

使用翻译服务时我有一个非常奇怪的行为。我这样配置翻译器：

export class AppComponent implements OnInit {


constructor(
    private translateService: TranslateService,
    angulartics2GoogleAnalytics: Angulartics2GoogleAnalytics,
    angulartics2: Angulartics2,
    router: Router,
    private googleAnalyticsService: GoogleAnalyticsService,
) {
     translateService.setDefaultLang('en');
     translateService.use('en');
}

和我的 HomeComponent ：

export class HomePageComponent implements OnInit {
constructor(
    private seoService: SeoService,
    private translateService: TranslateService
) {
}

ngOnInit() {
    this.addPageMeta();
    console.log('Add Page Meta');
}

addPageMeta() {
const title = this.translateService.instant('seo.home.title');
const meta: SeoMeta = {
  url : '/home',
  title: title,
  description: this.translateService.instant('seo.home.description'),
};
this.seoService.setPageTitle(title);
this.seoService.addMeta(meta);
}
}

核心.module.ts：

TranslateModule.forRoot({
  loader: {
    provide: TranslateLoader, …