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

我想要完成的事情基本上是（点击）事件监听器所做的事情，如果发生特定事情，点击，执行特定功能。对于我的指令，如果用户按Enter键，则执行名为search()的方法。

现在，在任何键盘上我成功地进入了我的指令，该指令存在于我的组件文件的单独文件中。并且它成功识别何时按下回车键。

但它不会触发我的search()功能。我错过了什么使指令识别出一个事件处理程序附加到它上类似于如何（click）=＆＃34; aMethod（）＆＃34;功能

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

否则，按照建议，您可以直接在输入元素

上检查组件模板中的键

如何从类似于（click）=＆＃34; handler（）＆＃34;的自定义指令触发组件函数？

2 个答案: