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

Posted 2023-02-22

【中文标题】创建将在事件上运行函数的自定义指令

【英文标题】：Create custom directive that will run a function on an event

【发布时间】：2018-09-28 22:59:33

【问题描述】：

在 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 就会运行一个函数。

我怎样才能以角度重现这个？以下将绑定到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);
      //);
    
  

【参考方案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

【讨论】：

要添加到答案，调用函数并传递参数，您必须与当前上下文绑定：[cdEnter]="callback.bind(this, 'Hello ', 'world!')stackblitz.com/edit/angular-wuokme