自定义属性的角度转换

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。在前面我无论如何都会收到绑定错误，因为它无法识别该属性。

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

Answer 1

你只是在模板中有一个错字。您必须使用一种单向数据绑定语法来使用转换后的值更新属性“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>