自定义属性的 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>

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

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

Answer 1

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

您的代码产生:

<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>