停止父组件Angular 6+上的任何事件侦听器

Question

设计一个带有html按钮的组件

my-button.html

<button type="config.type", [disable]="config.disable">
 ....lot of other stuffs 
</button>

应用中的其他位置- home.component.html

<my-button [config]="config" (click)="handleClick()"></my-button>

现在，如果有人在(click)="handleClick()"上附加了my-button，即使禁用子html按钮，也会发生单击。如何阻止儿童的这种行为？

Answer 1

我可能会考虑利用“指针事件”属性（“自动” /“无”）。像这样：

  <my-button (click)="clickMe()" [style.pointer-events]="config.disable">
    <button ion-button>Hi</button>
  </my-button>

其中config.disable是“ auto”或“ none”；

或者如果您需要坚持使用布尔值：

  <my-button (click)="clickMe()" [style.pointer-events]="config.disable? 'none':'auto'">
    <button ion-button>Hi</button>
  </my-button>

Answer 2

您可以在ts或html文件中处理它

解决方案1 ​​

<my-button [config]="config" (click)="config.disable ? return false : handleClick()"></my-button>

解决方案2

in html

<my-button [config]="config" (click)="handleClick(config.disable)"></my-button>

ts

handleClick(disabled){
   if(disabled){
      return;
   }else{
     //execute rest of the codes here ...
   }
}

解决方案3

如果要处理组件中的click事件，则可以使用HostListener

@HostListener('click', ['$event']) 
  onClick(e) {
    if(someCondition){  //If disabled
      e.preventDefault();
      e.stopPropagation();
    }
  }

Answer 3

您可以使用stopPropagation（），它会拒绝传播到子元素。

handleClick(event){
   ...
   event.stopPropagation();
}