Angular 阻止默认行为的自定义指令未正常生效问题

你的模块声明、导入导出、指令选择器配置均无语法错误，指令未生效的核心原因是：

Angular v9及以上版本为优化拖拽、滚动类交互的运行性能，默认会将dragover、drop、touchmove、wheel这类高频触发事件的监听器注册为passive模式。在passive模式的监听器中调用event.preventDefault()会被浏览器直接拦截忽略，无法阻止默认行为，最终出现拖拽文件后浏览器直接打开文件的现象。
你在组件内直接绑定事件可以正常生效，是因为Angular检测到模板中显式书写了事件绑定语法时，会自动将对应监听器的passive配置设为false，允许执行默认行为阻止逻辑，但@HostListener装饰器默认不会做该自动适配。

方案1（推荐，适用于Angular 14+版本） #

给@HostListener装饰器传入第三个配置参数，明确指定passive: false，同时补充stopPropagation()避免事件冒泡到父元素触发意外逻辑，修改后的指令代码如下：

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

@Directive({
  selector: '[app-event-blocker]',
})
export class EventBlockerDirective {
  @HostListener('drop', ['$event'], { passive: false })
  @HostListener('dragover', ['$event'], { passive: false })
  public handleEvent(event: Event) {
    event.preventDefault();
    event.stopPropagation();
  }
}

方案2（兼容Angular 14以下版本） #

如果你的项目Angular版本低于14，@HostListener不支持传入事件配置参数，可以改用Renderer2手动注册事件监听器，手动指定passive: false，代码如下：

import { Directive, ElementRef, OnDestroy, OnInit, Renderer2 } from '@angular/core';

@Directive({
  selector: '[app-event-blocker]',
})
export class EventBlockerDirective implements OnInit, OnDestroy {
  private listenerRemovers: Array<() => void> = [];

  constructor(
    private elementRef: ElementRef<HTMLElement>,
    private renderer: Renderer2
  ) {}

  ngOnInit(): void {
    // 绑定dragover事件
    const removeDragoverListener = this.renderer.listen(
      this.elementRef.nativeElement,
      'dragover',
      (event: Event) => {
        event.preventDefault();
        event.stopPropagation();
      },
      { passive: false }
    );

    // 绑定drop事件
    const removeDropListener = this.renderer.listen(
      this.elementRef.nativeElement,
      'drop',
      (event: Event) => {
        event.preventDefault();
        event.stopPropagation();
      },
      { passive: false }
    );

    this.listenerRemovers.push(removeDragoverListener, removeDropListener);
  }

  ngOnDestroy(): void {
    // 销毁指令时移除事件监听，避免内存泄漏
    this.listenerRemovers.forEach(remove => remove());
  }
}

修改代码后重启开发服务，向目标区域拖拽文件时浏览器不会再直接打开文件，即代表指令逻辑正常生效。

内容的提问来源于stack exchange，提问作者Hayk