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

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

然后输入一个数字我得到这个错误

类型错误:jit_nodeValue_10(...).dollarMax 不是函数

我不确定是什么导致了这个问题..

如有任何帮助，我们将不胜感激!

Answer 1

@HostListener装饰器用于将处理程序关联到事件。在本例中，onkeydown 的声明应该紧跟装饰器:

export class PieceRateDirective {

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

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