Typescript 如何在Aurelia中禁用具有authorize custom属性的自定义组件

我正在尝试为我的自定义组件创建一些授权逻辑。我想要实现的是，我可以设置一个完全禁用组件的属性，例如，当用户拥有只读权限时。我试过一个按钮，但不是很满意。我的工作是基于这个问题的解决方案

my button.html:（当前仅限html）

连同

.disabled {
  pointer-events: none;
}

这可以很好地工作，但是仍然需要在每个元素上执行样式设置，因为它们可能会有所不同。然后，我将向特定元素添加一个disabled.bind表达式，以应用它们各自的禁用样式。我认为，这消除了greatauth属性的好处

---

是否有任何方法可用于自定义组件？

能否显示您的虚拟机

my按钮。ts

？目前没有。它是一个仅html的组件，如果可以称为组件的话……父级分配属性

authorized

，组件绑定到属性

disabled

。是的，我知道，实际上根本不需要禁用的组件。也许在这个例子中我也应该删除它。但是我最终需要它来让它在我当前的代码中工作。如果组件应该在独立于授权的场景中使用，那么disabled属性也存在，例如应用程序状态。

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

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