自定义指令无法识别

Question

我创建了一个名为 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;
}

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

有人知道我的代码中有什么不起作用吗？

非常感谢您的帮助，祝您有愉快的一天！

Answer 1

要完成这项工作，需要三个步骤。它适用于几乎所有 Angular 元素，如组件、指令、管道等。

1. 在特定模块中声明指令 例如：SharedModule
2. 从该模块导出指令，即SharedModule
3. 在要使用的组件的父模块中导入该模块。例如：SomeOtherModule

示例代码：

@NgModule({
    declarations: [HoldableDirective],
    exports: [HoldableDirective]
})
export class SharedModule {}


@NgModule({
    declarations: [
        SomeChildComponent
    ],
    imports: [
        ... other modules,
        SharedModule
    ]
})
export class SomeOtherModule

这样，SomeOtherModule 的所有成员都可以使用带有各自选择器的指令。

注意：导出模块成员很重要，如果您希望它们成为 可从其他模块访问。把它想象成一个公共 API 模块。

Answer 2

您似乎正在考虑 providers 在模块中的工作方式，这是一种“自上而下”的方法，在该模块下游的任何模块都可以使用它。

要在单个模块中使用组件或指令，需要在该单个模块中导入或声明它们。我的偏好是为该指令或较小的功能组创建一个模块，导出可重用的部分，然后在需要的地方导入它们（参见Angular Material library 的示例）。

在你的例子中使用它：

@NgModule({
  declarations: [
    HoldableDirective,
  ],
  exports: [
    HoldableDirective,
  ],
  imports: [
    CommonModule,
    ...
  ]
})
export class HoldableModule { }


@NgModule({
  declarations: [
    CashRegisterComponent, 
    ScannerComponent, 
    ArticlePreviewComponent, OverviewComponent, PaymentComponent,

  ],
  imports: [
    CommonModule,
    CashRegisterRoutingModule,
    UIModule,
    HoldableModule, // <-- useing that common module here

  ]
})
export class CashRegisterModule { }