无法识别自定义指令

我创建了一个名为holdable 的自定义指令。

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

import { Observable, Subject, interval } from 'rxjs';
import { takeUntil, tap, filter } from 'rxjs/operators';

@Directive({
  selector: '[appHoldable]'
})
export class HoldableDirective {

  @Output() holdTime: EventEmitter<number> = new EventEmitter();

  state: Subject<string> = new Subject();

  cancel: Observable<string>;

  constructor() { 
    this.cancel = this.state.pipe(
      filter(v => v === 'cancel'),
      tap(v => {
        console.log('Stopped holding.');
        this.holdTime.emit(0);
      }
      )
    );
  }

  @HostListener('mouseup', ['$event'])
  @HostListener('mouseleave', ['$event'])
  onExit(){
    this.state.next('cancel');
  }

  @HostListener('mousedown', ['$event'])
  onHold(){
    console.log('Started holding.');
    this.state.next('start');
    const n = 100;
    interval(n).pipe(
      takeUntil(this.cancel),
      tap(v => {
        this.holdTime.emit(v * n);
      })
    )
    .subscribe()
  }
}

它注册在 AppModule 中，因为我想在整体应用程序中使用它。例如在我的名为 CashRegisterModule 的模块中：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { CashRegisterRoutingModule } from './cash-register-routing.module';

import { CashRegisterComponent } from './cash-register.component';
import { UIModule } from '../UI/ui.module';
import { ScannerComponent } from './steps/scanner/scanner.component';
import { ArticlePreviewComponent } from './steps/article-preview/article-preview.component';
import { OverviewComponent } from './steps/overview/overview.component';
import { PaymentComponent } from './steps/payment/payment.component';

@NgModule({
  declarations: [
    CashRegisterComponent, 
    ScannerComponent, 
    ArticlePreviewComponent, OverviewComponent, PaymentComponent
  ],
  imports: [
    CommonModule,
    CashRegisterRoutingModule,
    UIModule
  ]
})
export class CashRegisterModule { }

而且这个模块也在 app.module.ts 文件中注册 看起来像这样

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { DashboardModule } from './views/dashboard/dashboard.module';
import { UIModule } from './UI/ui.module';
import { ArticleModule } from './views/article/article.module';
import { ArticleService } from './services/article.service';
import { UiService } from './services/ui.service';
import { CashRegisterModule } from './cash-register/cash-register.module';
import { DataService } from './services/data.service';
import { HoldableDirective } from './directives/holdable.directive';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    HoldableDirective,
  ],
  imports: [
    CommonModule,
    BrowserModule,
    HttpClientModule,
    RouterModule,
    ReactiveFormsModule,
    DashboardModule,
    UIModule,
    ArticleModule,
    CashRegisterModule,
    AppRoutingModule
  ],
  providers: [
    ArticleService,
    UiService,
    DataService
  ],
  bootstrap: [
    AppComponent
  ],

})
export class AppModule { }

我在 CashRegisterComponent 的 PaymentComponent 内的按钮中使用指令

<button *ngFor="let moneyType of state.moneyToRender"
      appHoldable (holdTime)="calculateGivenMoney(moneyType, $event)"
      >{{moneyType.toFixed(2)}} €
    </button>

calculateGivenMoney(...) 将像这样初始化

calculateGivenMoney(amount: number, /*operation: string,*/ holdTime: number): number {
    console.log('ich werde geklickt.' + holdTime)
    if(holdTime > 1000){
      this.state.givenMoney = this.state.givenMoney - amount;
    } else {
      this.state.givenMoney = this.state.givenMoney + amount;
    } return this.state.givenMoney;
}

但是两个打印语句都不起作用……

有谁知道什么在我的代码中不起作用？

非常感谢您的帮助，祝您有美好的一天！