如何在除父组件之外所有组件上禁用鼠标滚轮滚动

import { Component, HostListener } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<router-outlet></router-outlet>`,
})
export class AppComponent {
  @HostListener('window:wheel', ['$event'])
  onWheel(event: WheelEvent) {
    // 阻止默认的滚动行为
    event.preventDefault();
  }
}

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

@Directive({
  selector: '[disableScroll]',
})
export class DisableScrollDirective {
  constructor(private el: ElementRef) {}

  @HostListener('window:wheel', ['$event'])
  onWheel(event: WheelEvent) {
    // 阻止默认的滚动行为
    event.preventDefault();
  }
}

<div disableScroll>
  <!-- 组件内容 -->
</div>