如何给第三方Angular组件打猴补丁以移除HostListener

Question

我们的团队严重依赖于Angular的内部组件库，不幸的是，这个库中有一个附加了window:scrollHostListener的组件。这个HostListener会在每次页面滚动时触发变化检测，从而降低应用程序的性能。

不幸的是，负责维护这个库的团队似乎没有能力在短时间内修复这个组件，但是因为我们的应用程序并不关心HostListener提供的功能，我们希望有可能为这个特定的组件修补HostListener。

Monkey通过在原型上重新定义字段来修补函数本身当然是有效的，但这并不能阻止HostListener触发和触发更改检测，而这正是实际性能问题的来源。

如果有关系的话，我们的应用是在Angular 10上的，尽管我们希望尽快升级。

Answer 1

1. 如果您知道该功能"附件"到hostListener，则可以创建一个指令-在代码中它被称为"onScroll"和

   @Directive({
   selector: '[nullScroll]',
   })
   export class NullScrollDirective {
   constructor(private helloComponent: HelloComponent) {
   if (this.helloComponent['onScroll']) {
   this.helloComponent['onScroll'] = () => {
   return null;
   };
   }
   }
   }
   

   然后使用

   <hello nullScroll ...></hello>
   

2. 您还可以检查组件的字体-它是一个库应该在node_modules中，并删除@HostListener。取如果你更新库，你应该再次更改hostListener

3. 我不知道是否有可能创建一个从此组件并通过fromEvent rxjs更改hostListener使用剥离管道的操作符