Stackblitz

Question

有关此问题的文章很多，但所有答案都表明以下一项或多项内容：

stopPropagation
preventDefault
return false。

但在我的情况下，non不能正常工作。这是stackblitz。单击按钮时，控制台将显示以下期望的行为：

click - button
stop

但它也显示

Click from app component - but it shouldn't happened

此点击不应该发生（在app.component中）：

<my-button [disabled]="true" (click)="onClick()"></my-button>`

public onClick()
{
  console.log("Click from app component - but it shouldn't happened");
}

提供了一种解决方案here。但是，创建另一个span元素真的是唯一的选择吗？

也

本地添加和删除EventListeners

看起来不是很好的解决方案。

Answer 1

删除HostListener，并在button组件中为my-button添加一个点击侦听器。

此外，您不需要额外的this.click.emit()，因为如果未调用stopPropogation，它将自动传播。

模板

<button (click)='onClick($event)'>{{text}}</button>

单击按钮后，将调用onClick中的my-button，根据某些逻辑，您可以选择发射或丢弃click。

@Component({
  selector: "my-button",
  template: `<button (click)='onClick($event)'>{{text}}</button>`
})
export class MyButton
{
  @Input() disabled = false;

  @Input() text = "Click me";
  @Output() click = new EventEmitter();

    public onClick(event: Event)
    {
        console.log("click - button");
        if (!this.disabled)
            console.log("click emit");
        else
        {
            console.log("stop");
            event.stopPropagation();
        }
    }
}

Stackblitz

Answer 2

问题是您将EventEmitter命名为“ click”，这与Angular用来命名click事件的名称相同。因此，将EventEmitter的名称从“ click”更改为“ clickEmitter”，这将解决您的问题。

<my-button [disabled]="true" (clickEmitter)="onClick()"></my-button>
@Output()
public clickEmitter = new EventEmitter();

角度阻止主机单击禁用输入参数的自定义按钮组件

2 个答案:

Stackblitz