禁用时的自定义按钮组件事件问题答案

【问题标题】：Custom button component event issue on disabled禁用时的自定义按钮组件事件问题
【发布时间】：2020-09-14 16:11:19
【问题描述】：

我在禁用共享组件中的按钮时遇到问题。这是这里的设置

共享自定义按钮组件

<button [disabled]="disabled">
    <span>
        <ng-content></ng-content>
    </span>
</button>

用法

<shared-button-component [disabled]="true" (click)="doAction()">Test</shared-button-component>

现在的事情是，当 disabled 设置为 true 时，显然是因为按钮本身被禁用，它应该实际上不允许单击事件，但是当我进行此设置时，它仍然会导致 doAction() 执行它的操作，而不是阻止它。我在这里做错了什么或遗漏了什么？

【问题讨论】：

【解决方案1】：

您在组件本身上设置了(click) 事件绑定，而不是在按钮上。所以你点击动作是通过点击<shared-button-component>而不是实际按钮发出的。

使用@Output 将点击事件传递给该父组件。见：https://angular.io/guide/inputs-outputs#output

【讨论】：

我觉得这可行，如果我确实想要自定义输出的话。有没有办法覆盖父容器的（单击）事件，并取而代之的是其子元素的单击事件？
我想如果没有办法做到这一点，有没有办法为 :host 设置条件样式？如果有条件方法将 :host{} 设置为 css 样式规则，我可以很容易地实现我想要的，尽管我似乎也找不到类似的东西。