创建将运行事件函数的自定义指令

Question

在 angularjs 中我有一个指令：

export default angular.module('cd.enter', [])
    .directive('cdEnter', () => {
        return {
            link: (scope, element, attrs) => {
                element.bind("keydown", (event) => {
                    if (!event.shiftKey && event.which === 13) {
                        event.preventDefault();
                    }
                });

                element.bind("keyup", (event) => {
                    if (!event.shiftKey && event.which === 13) {
                        event.preventDefault();
                        scope.$apply(() => {
                            scope.$eval(attrs.cdEnter);
                        });
                    }
                });
            }
        }
    });

这将允许在带有 shift + enter 的文本区域内换行，然后运行如果仅按下 enter 则将是一个函数。

如何在 angular 中复制它？以下将绑定到 keyup 和 keydown 事件，但我需要知道如何获取函数，然后在正确的上下文中运行它。

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

@Directive({
  selector: '[cdEnter]'
})
export class EnterDirective {
  @Input() cdEnter: Function;

  constructor() { }

  @HostListener('keydown', ['$event']) onKeyDown(event) {
    if (!event.shiftKey && event.which === 13) {
      event.preventDefault();
    }
  }

  @HostListener('keyup', ['$event']) onKeyUp(event) {
    if (!event.shiftKey && event.which === 13) {
      event.preventDefault();
      //How to perform the equivalent in Angular
      //scope.$apply(() => {
      //  scope.$eval(this.cdEnter);
      //});
    }
  }
}

Answer 1

您不需要 event.shiftKey 和 event.which。 Angular 提供了一个很好的高级 API 用于以声明方式处理事件。您只需在 @HostBinding() 参数中键入 keydown.shift.enter。

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

@Directive({
  selector: '[cdEnter]'
})
export class EnterDirective {
  @Input() cdEnter: Function;

  constructor() { }

  @HostListener('keydown.shift.enter', ['$event'])
  onKeyUp(event: any) {
    event.preventDefault();
    this.cdEnter();
  }
}

Live demo

创建将运行事件函数的自定义指令

Create custom directive that will run a function on an event

typescript

angular-directive

angular

angular5

创建将 运行 事件函数的自定义指令

Create custom directive that will run a function on an event

typescript

angular-directive

angular

angular5

创建将运行事件函数的自定义指令