Question

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

但它不起作用。我已经查看了与类似问题有关的不同答案，但有些人表示有些人表示它并没有。如果我没有attr的用户。在前面我得到了一个绑定错误，因为它无法识别属性。

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

Answer 1

您的模板中只有拼写错误。您必须使用单向数据绑定语法来更新属性＆＃34; data-show＆＃34;与翻译的价值。如果省略括号，则只需创建静态＆＃34; attr.data-show＆＃34;属性值为＆＃34; {{GLOBALS.ACTIONS.SHOW | translate}}＆＃34;

您的代码生成：

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

自定义属性的角度转换

1 个答案: