Angular 13 中未调用鼠标滚轮指令

Question

我正在尝试使用鼠标滚轮指令。这是我的第一个指令，我无法让它发挥作用。这是指令：

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

@Directive({
  selector: '[wheel]'
})
export class MouseWheelDirective {

  constructor(private el: ElementRef) {
    console.log("directive was created");
  }

  @HostListener('mousewheel', ['$event'])
  onMousewheel(event) {
    console.log("event");
    if (event.wheelDelta > 0) {
      console.log("wheel 0");
    }
    if (event.wheelDelta < 0) {
      console.log("wheel 1");
    }
  }
}

这就是我的使用方式：

<div #htmlDiv wheel class="data-table">
    <table mat-table [dataSource]="dataSource">
        ...
    </table>
</div>

我在 NgModule 中注册了指令：

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

在控制台中我看到 directive was created。但是当我在 table 上滚动鼠标滚轮时，我没有看到任何消息。谁能告诉我如何解决它？

Answer 1

'mousewheel' 已弃用。请改用 'wheel'。这是 HTML DOM 事件的列表： https://www.w3schools.com/jsref/dom_obj_event.asp

Angular 13 中未调用鼠标滚轮指令

Mouse wheel directive is not called in Angular 13

javascript

typescript

angular