在 Angular 中将数据从指令传递到组件

Question

这是指令，它监听任何组件上的击键：

import { Directive, HostListener } from '@angular/core';

@Directive({ selector: '[keyCatcher]' })
export class keyCatcher {
    @HostListener('document:keydown', [ '$event' ])
    onKeydownHandler(event: KeyboardEvent) {
        alert(event.key);
    }
}

KeyCatcher 用于自定义组件的 HTML 部分。

如何使用 KeyCatcher 将 event.key 传递给 component.ts？

这通常是通过服务完成的吗？

Answer 1

尝试这样的事情https://stackblitz.com/edit/angular-8rqqrc

在指令中使用 EventEmitter 的 @Output 允许您将函数从父级绑定到它以读取事件流。

在 Angular 中将数据从指令传递到组件

Passing data from Directive to Component in Angular

angular

typescript

directive