如何从类似于 (click)="handler()" 的自定义指令触发组件函数？

Question

我有一个名为 enterListener 的自定义事件指令，定义如下

import { Directive, EventEmitter, Output, HostListener } from "@angular/core";

@Directive({
    selector: '[enterListener]'
})

export class EnterKeyDirective {
    @Output() emitter: EventEmitter<any> = new EventEmitter();

    @HostListener('keyup', ['$event'])
    onEnter($event: any) {
        if ($event.key === 'Enter') {
            this.emitter.emit($event);
        }
    }
}

它在我的 html 中实现，就像这样

<input (enterListener)="search()" id="searchBar" [(ngModel)]="searchValue" class="card-img" type="text" placeholder="Search" />

我想要完成的基本上是 (click) 事件侦听器所做的，如果特定的事情发生，点击，执行特定的功能。对于我的指令，如果用户按下回车键，则执行我调用的方法 search().

现在，在任何键上，我都成功地进入了我的指令，该指令存在于与我的组件文件分开的文件中。并在按下回车键时成功识别。

但它不会触发我的 search() 功能。我缺少什么让指令识别出附加了一个事件处理程序，类似于 (click)="aMethod()" 的功能？

Answer 1

尝试将您的 HTML 替换为这样的东西

<input (keyup)="search()" id="searchBar" [(ngModel)]="searchValue" class="card-img" type="text" placeholder="Search" />

Answer 2

如果真的要使用指令，需要绑定指令中声明的事件发射器的名称

<input [enterListener] (emitter)="search($event)" id="searchBar" [(ngModel)]="searchValue" class="card-img" type="text" placeholder="Search" />

否则，按照建议，您可以直接在组件模板中检查输入元素上的 keyup

如何从类似于 (click)="handler()" 的自定义指令触发组件函数？

How would I trigger a component function from a custom directive similar to (click)="handler()"?

html

angular-directive

angular