Angular 角度6-单击或聚焦时调用函数

我希望能够仅在单击或聚焦时从组件调用函数。以下是HTML组件的一部分：

<div class="form-add-new__input-box">
     <input
           #commentCategories
           class="form-add-new__category-box"
           (click)="toggleCategoriesSelection($event)"
           (focus)="toggleCategoriesSelection($event)"
           (keyup)="searchCategory($event.target.value)"
           tabindex="0"
           placeholder="Search or select">
     <span class="icon-arrow-down"></span>
</div>

基本上，我想在单击或聚焦时调用toggleCategoriesSelection-右键在第一次单击时调用2次。我希望这样的事情能奏效：

(click | focus)="toggleCategoriesSelection($event)"

---

但不幸的是，事实并非如此；我不能这样工作。如何执行此操作？

将停止传播方法添加到单击并聚焦事件中

 <input
           #commentCategories
           class="form-add-new__category-box"
           (click)="$event.stopPropagation();$event.preventDefault();toggleCategoriesSelection($event)"
           (focus)="$event.stopPropagation();$event.preventDefault();toggleCategoriesSelection($event)"
           (keyup)="searchCategory($event.target.value)"
           tabindex="0"
           placeholder="Search or select">
     <span class="icon-arrow-down"></span>

---

希望我能帮助你

实际上，您可能不需要在单击和聚焦事件上调用切换类别选择。但是如果你想这样做，你可以使用下面的方法

在这里，我们将消除smallTimeout期间频繁发生的函数调用的干扰

timeOutExceeded = true // initial value

public toggleCategoriesSelection(event: Event): void {
    if (this.timeOutExceeded) {
        // your logic
        this.timeOutExceeded = false;
        setTimeout(() => {
            this.timeOutExceeded = true;    
        }, smallTimeout);
    }
}

此外，您还可以查看下面的RXJS去Bouncing（或任何其他此类技术）

---

如果我想点击它，我不是总是要聚焦它，因为我要把光标移到它上面吗？要在第一个解决方案中只调用一次，请尝试在执行实际代码之前放置一些去盎司或节流功能。焦点和单击是相同的。这是一个切换，当焦点不切换选择时再次单击它。编辑：您也可以现在使用“防止默认值”进行尝试。效果很好：）我还为相同的功能添加了一个（模糊），这正是我所需要的。

timeOutExceeded = true // initial value

public toggleCategoriesSelection(event: Event): void {
    if (this.timeOutExceeded) {
        // your logic
        this.timeOutExceeded = false;
        setTimeout(() => {
            this.timeOutExceeded = true;    
        }, smallTimeout);
    }
}