Question

我希望仅在单击或焦点时才能从组件中调用函数。这是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>

和功能：

public toggleCategoriesSelection(event: Event): void {
    event.stopPropagation();
    event.preventDefault();
    this.categoriesSelectOpen = !this.categoriesSelectOpen;
}

基本上，我想在单击或焦点时调用toggleCategoriesSelection-正确，第一次单击时被调用2次。我希望这样的事情可以工作：

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

但是不幸的是，它不能像这样工作。我该怎么办？

Answer 1

在点击和焦点事件中添加停止传播方法。

 <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>

希望我能帮助您！

Answer 2

实际上，您可能不需要在 click 和 focus 事件上都调用 toggleCategoriesSelection 。但是，如果要这样做，可以使用以下类似的内容。

在这里，我们取消了在 smallTimeout 期间发生的频繁函数调用。

timeOutExceeded = true // initial value

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

此外，您还可以在下面查看 RXJS弹跳（或其他任何此类技术）。

https://medium.com/aviabird/rxjs-reducing-number-of-api-calls-to-your-server-using-debouncetime-d71c209a4613

Angular 6-单击或聚焦时调用功能

2 个答案: