你可以阻止Angular组件的主机点击发射吗？ [英] Can you prevent an Angular component's host click from firing?

问题描述

我正在创建一个包含原生< button> 元素的Angular组件，其中包含一些其他功能。如果它们被禁用并且我想要复制相同的功能，则按钮不会触发单击事件。即，给定：

I'm creating an Angular component that wraps a native <button> element with some additional features. Buttons do not fire a click event if they're disabled and I want to replicate the same functionality. i.e., given:

<my-button (click)="onClick()" [isDisabled]="true">Save</my-button>

有没有办法我的按钮防止 onClick（）被调用？

Is there a way for my-button to prevent onClick() from getting called?

在Angular中，您可以通过这种方式收听主机点击事件，并停止事件的传播：

In Angular you can listen to the host click event this way, and stop propagation of the event:

//Inside my-button component
@HostListener('click', ['$event'])
onHostClick(event: MouseEvent) {
  event.stopPropagation();
}

这可以防止事件冒泡到祖先元素，但它不会阻止内置（点击）在同一主机元素上触发输出。

This prevents the event from bubbling to ancestor elements, but it does not stop the built-in (click) output from firing on the same host element.

有没有办法实现这一点？

Is there a way to accomplish this?

编辑1：我现在解决这个问题的方法是使用不同的方式输出称为onClick，消费者必须知道使用onClick而不是click。这不是理想的。

Edit 1: the way I'm solving this now is by using a different output called "onClick", and consumers have to know to use "onClick" instead of "click". It's not ideal.

编辑2：点击源自< button> 元素已成功停止。但是如果你像我一样将元素放在按钮标记内，那么单击这些目标上的事件会传播到主机。嗯，应该可以将按钮包装在另一个停止传播的元素中......

Edit 2: Click events that originate on the <button> element are successfully stopped. But if you put elements inside the button tag as I have, click events on those targets do propagate up to the host. Hm, it should be possible to wrap the button in another element which stops propagation...

推荐答案

您可以执行以下操作：

You could do the following:

• 重新定义组件的单击事件，并在按钮时发出此事件单击


• 在组件主机上设置CSS样式 pointer-events：none


• 在按钮上设置CSS样式 pointer-events：auto


• 调用 event.stopPropagation（）



• Redefine the click event of the component, and emit this event when the button is clicked
• Set the CSS style pointer-events: none on the component host
• Set the CSS style pointer-events: auto on the button
• Call event.stopPropagation() on the button click event handler

如果需要处理组件内其他元素的click事件，在它们上设置样式属性 pointer-events：auto ，并在其click事件处理程序中调用 event.stopPropagation（） 。

If you need to process the click event of other elements inside of your component, set the style attribute pointer-events: auto on them, and call event.stopPropagation() in their click event handler.

您可以在 此stackbli tz 。

import { Component, HostListener, Input, Output, ElementRef, EventEmitter } from '@angular/core';

@Component({
  selector: 'my-button',
  host: {
    "[style.pointer-events]": "'none'"
  },
  template: `
    <button (click)="onButtonClick($event)" [disabled]="isDisabled" >...</button>
    <span (click)="onSpanClick($event)">Span element</span>`,
  styles: [`button, span { pointer-events: auto; }`]
})
export class MyCustomComponent {

  @Input() public isDisabled: boolean = false;
  @Output() public click: EventEmitter<MouseEvent> = new EventEmitter();

  onButtonClick(event: MouseEvent) {
    event.stopPropagation();
    this.click.emit(event);
  }

  onSpanClick(event: MouseEvent) {
    event.stopPropagation();
  }
}

这篇关于你可以阻止Angular组件的主机点击发射吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！