Question

我有这样设置的自定义指令。

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

@Directive({
    selector: '[pieceRate]'
})
export class PieceRateDirective {
    @HostListener('input', ['$event'])
    @Input() dollarMax: string;
    @Input() centMax: string;
    onkeydown(event: KeyboardEvent) {
      const input = event.target as HTMLInputElement;
      console.log(this.dollarMax);
      console.log(this.centMax);
  }
}

我将其导入到共享模块中，该共享模块也导入到我的主模块中。

共享模块

import { PieceRateDirective} from '@app/directives...'
...

@NgModule({
   imports..
   declarations: [
     PieceRateDirective
   ],
   exports: [
      PieceRateDirective
   ]
})

主模块

import { SharedModule } from '@app/shared.module';
...

@NgModule({
   imports: [
      SharedModule
   ]
})
...

看起来一切正常，但是当我实际尝试使用我的指令时就如此。

<input
   pieceRate
   [dollarMax]="rangeTo?.toString().split('.')[0]"
   [(ngModel)]="dollarPieceRate"
   type="number" >

并输入数字，我会收到此错误

TypeError: jit_nodeValue_10(...).dollarMax is not a function

我不确定是什么原因导致了此问题。

任何帮助将不胜感激！

Answer 1

使用@HostListener装饰器将处理程序与事件相关联。在当前情况下，onkeydown的声明应紧随装饰器之后：

export class PieceRateDirective {

  @Input() dollarMax: string;
  @Input() centMax: string;

  @HostListener('input', ['$event'])
  onkeydown(event: KeyboardEvent) {
    ...
  }
}

Answer 2

您必须将主机侦听器应用于函数，而不是输入字符串。

export class PieceRateDirective {
  @Input() dollarMax: string;
  @Input() centMax: string;

  @HostListener('input', ['$event'])
  onkeydown(event: KeyboardEvent) {
    const input = event.target as HTMLInputElement;
    console.log(this.dollarMax);
    console.log(this.centMax);
  }
}

自定义指令输入返回错误Angular 5

2 个答案: