如何通过猴子补丁移除Angular组件的window:scroll HostListener

核心思路 #

直接重写组件原型上的滚动处理函数无法阻止HostListener触发变更检测——因为Angular已经基于组件元数据完成了事件绑定。要从根源解决，需要阻止Angular注册该滚动监听器，或者在注册阶段拦截它。

方案一：修改组件内部元数据（Angular 10适用） #

Angular 10中，组件的元数据存储在类的ɵcmp私有属性中，其中的listeners数组记录了所有HostListener绑定的事件。我们可以在应用初始化时过滤掉window:scroll对应的监听器：

import { APP_INITIALIZER } from '@angular/core';
import { BadScrollComponent } from '@internal-lib/components';

// 定义补丁函数
const patchScrollListener = () => {
  // 检查组件元数据是否存在
  if (BadScrollComponent.ɵcmp?.listeners) {
    // 过滤掉window:scroll的监听器
    BadScrollComponent.ɵcmp.listeners = BadScrollComponent.ɵcmp.listeners.filter(listener => {
      // Angular 10中listener数组第一项为事件名（格式如'window:scroll'）
      return !listener[0].includes('window:scroll');
    });
  }
};

// 注册为应用初始化钩子，确保在组件实例化前执行
export function appInitializer() {
  return () => {
    patchScrollListener();
    return Promise.resolve();
  };
}

// 在AppModule的providers中配置
@NgModule({
  // ...其他配置
  providers: [
    { provide: APP_INITIALIZER, useFactory: appInitializer, multi: true }
  ]
})
export class AppModule {}

方案二：拦截Renderer2的事件注册（兼容后续版本） #

如果担心依赖Angular私有API（ɵcmp在后续版本可能变更），可以通过拦截Renderer2的listen方法，跳过目标组件的window:scroll事件注册：

import { APP_INITIALIZER, RendererFactory2 } from '@angular/core';
import { BadScrollComponent } from '@internal-lib/components';

const patchRenderer = (rendererFactory: RendererFactory2) => {
  const originalListen = rendererFactory.createRenderer.prototype.listen;
  
  rendererFactory.createRenderer.prototype.listen = function(target: any, eventName: string, callback: Function) {
    // 判断是否是window的scroll事件，且当前组件为目标组件
    if (target === window && eventName === 'scroll') {
      // 检查回调函数是否属于BadScrollComponent的实例方法（可根据实际函数特征调整判断）
      if (callback?.toString().includes('BadScrollComponent')) {
        // 返回空的注销函数，不注册事件
        return () => {};
      }
    }
    return originalListen.call(this, target, eventName, callback);
  };
};

export function appInitializer(rendererFactory: RendererFactory2) {
  return () => {
    patchRenderer(rendererFactory);
    return Promise.resolve();
  };
}

// 在AppModule的providers中配置
@NgModule({
  // ...其他配置
  providers: [
    { 
      provide: APP_INITIALIZER, 
      useFactory: appInitializer, 
      deps: [RendererFactory2], 
      multi: true 
    }
  ]
})
export class AppModule {}

注意事项 #

1. 私有API风险：方案一中的ɵcmp是Angular内部属性，升级到更高版本（如Angular 12+）后可能需要调整代码，升级前需验证。
2. 懒加载组件：如果目标组件在懒加载模块中，需要确保补丁在懒加载模块初始化前执行，可将补丁逻辑放在懒加载模块的初始化钩子中。
3. 回调函数匹配：方案二中需准确匹配目标组件的滚动处理函数，可通过打印callback.toString()查看函数特征，调整判断条件。

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