Angular 翻译自定义属性

Question

我有一个开关小部件，它使用自定义数据属性值来标记自己。

.switch.switch-text .switch-label::before {
  right: 1px;
  color: #c2cfd6;
  content: attr(data-hide);
  }
  
  .switch.switch-text .switch-label::after {
  left: 1px;
  color: #c2cfd6;
  content: attr(data-show);
  opacity: 0;
}

.switch.switch-text .switch-input:checked ~ .switch-label::before {
  opacity: 0;
}

.switch.switch-text .switch-input:checked ~ .switch-label::after {
  opacity: 1;
}

<label class="switch switch-text switch-pill switch-primary">
                            <input type="checkbox" class="switch-input" checked>
                            <span class="switch-label" attr.data-show="{{GLOBALS.ACTIONS.SHOW | translate}}" attr.data-hide="{{GLOBALS.ACTIONS.HIDE | translate}}"></span>
                            <span class="switch-handle"></span>
                        </label>

但这就是行不通。我看过与类似问题相关的不同答案，但有些人说它有效，有些人说它无效。如果我没有属性的用户。在前面，无论如何我都会遇到绑定错误，因为它无法识别该属性。

如何使用 angular 翻译来翻译自定义属性的值？

Answer 1

您的模板中有错字。您必须使用一种单向数据绑定语法来使用翻译后的值更新属性 "data-show"。如果省略括号，则只需创建一个值为“{{GLOBALS.ACTIONS.SHOW | translate}}”

的静态“attr.data-show”属性

您的代码生成：

<span class="switch-label" attr.data-show="{{GLOBALS.ACTIONS.SHOW | translate}}" attr.data-hide="{{GLOBALS.ACTIONS.HIDE | translate}}"></span>

更正后的模板语法为：

  <label class="switch switch-text switch-pill switch-primary">
        <input type="checkbox" class="switch-input" checked>
        <span class="switch-label" [attr.data-show]="'GLOBALS.ACTIONS.SHOW' | translate" [attr.data-hide]="'GLOBALS.ACTIONS.HIDE' | translate"></span>
        <span class="switch-handle"></span>
   </label>

Angular 翻译自定义属性

Angular translate on custom attributes

custom-attribute

angular-translate

angular