Angular 分量: disable click event

Question

我正在创建一个像这样的可重用组件:

<my-button [isDisabled]="isDisabled" (click)="click($event)"> submit </my-button>

我想在属性 isDisabled 为 true 时禁用点击事件，我尝试了类似的操作，但它不起作用。

packages/component/my-button.component.html

<button  [disabled]="isDisabled" #myButton>
        <ng-content></ng-content>
</button>

packages/component/my-button.component.ts

@ViewChild('uxButton') uxButton: ElementRef;
@Input() isDisabled: boolean = false;

this.myButton.nativeElement.parentNode.removeEventListener('click' , (e) => {
       e.stopPropagation();
});

Answer 1

也可以通过以下CSS解决:

# This prevents host to get a direct click
:host {
  pointer-events: none;
}

# This prevents the span inside the button to "steal" the click from the button
:host /deep/ button span {
  pointer-events: none;
}

# Now only the button can get a click 
# Button is the only smart enough to stop propagation when needed
button {
  pointer-events: auto;
}

现在您不需要像其他答案一样手动传递点击事件:您已经恢复了旧的(点击)事件:D

<my-button [isDisabled]="isDisabled" (click)="click($event)"> submit </my-button>

在您的自定义组件中，您只需传递禁用的属性即可:

<button  [disabled]="isDisabled" #myButton>
        <ng-content></ng-content>
</button>

另请考虑stackblitz修改自another stackoverflow answer .