Thuộc tính tùy chỉnh (custom atrributes) trong angular khi sử dụng để binding

Ví dụ 1: Tôi có một tiện ích chuyển đổi (switch widget) sử dụng giá trị thuộc tính dữ liệu tùy chỉnh để tự gắn nhãn.

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

và html

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

Nhưng nó không hoạt động. Nếu tôi sử dụng mà không có attr ở phía trước nó không nhận ra thuộc tính.

Làm cách nào tôi có thể dịch giá trị của thuộc tính tùy chỉnh khi binding trình dịch vào custom attribute ?

Giải pháp

Bạn chỉ có một lỗi đánh máy trong mẫu của bạn. Bạn phải sử dụng cú pháp để cập nhật thuộc tính cho “data-show” với giá trị được dịch. Nếu bạn bỏ qua dấu ngoặc thì bạn chỉ cần tạo một tĩnh (static) “attr.data-show” attribute với giá trị dịch (translate) {{GLOBALS.ACTIONS.SHOW | translate}}

Mã của bạn:

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

Cách dùng chính xác:

<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>
Đã đăng trong Angular, Code Snippets và được gắn thẻ , , .