如何在Aurelia中使用Authorize Custom属性禁用自定义组件

Question

我正在尝试为自定义组件创建一些授权逻辑。我想要实现的是我可以设置一个属性来完全禁用该组件，例如当用户具有只读权限时。我尝试了一个按钮，但对此并不满意。我的工作基于此question

的解决方案

my-button.html：（当前仅适用于html）

<template bindable="icon, disabled">
  <require from="./buttons.css"></require>

  <button class="btn btn-danger" disabled.bind="disabled">
      <slot>Enter text</slot>
      <i if.bind="icon" class="fa fa-${icon}"></i>
  </button>
</template>

parent.html：

<my-button authorized.bind="false" click.delegate="doSmth()" icon="home">NotAuth</my-button>

不幸的是，这并没有真正起作用，也许我在这里做错了。 我的解决方法是在属性的valueChanged方法中向属性附加到的元素添加disabled类：

private valueChanged() {
    if (this.disabledBinding) {
    [...]    
    } else {
      if (this.value === true) {
        this.el.removeAttribute('disabled');
        this.el.classList.remove('disabled');
      } else {
        this.el.setAttribute('disabled', 'disabled');
        // Added this class so that all child elements cannot be clicked, also for custom components.
        this.el.classList.add('disabled');
      }
    }
  }

与

一起

.disabled {
  pointer-events: none;
}

这很好，但是仍然需要对每个元素进行样式设置，因为它们可能会有所不同。然后，这使我向特定元素添加了disabled.bind表达式，以应用其各自的禁用样式。这消除了我认为很棒的auth属性的好处。

使用自定义组件有什么办法吗？