Angular 滚动到底部时的自动完成事件

我已经实现了priming autocomplete，当滚动结束时，我需要加载下一个元素。我浏览了已完成的问题，发现以下问题：

---

这是封闭的，但任何想法如何实现这一点。任何帮助都将不胜感激。

我有解决办法，但我希望有人有更好的选择。 角度v.7，涂底漆v.7：

在模板中：

添加完成方法：

在构造函数中插入Render2：

添加处理程序：

<p-autoComplete
  #autocompletePanel
  (completeMethod)="completeHandler($event)">
  ...
</p-autocomplete>

@ViewChild('autocompletePanel') autocompletePanel;

constructor(private renderer: Renderer2){}

public completeHandler(): void {
//you need to wait for panel to be added to the DOM (any better solutions?)
  setTimeout(() => {
    const autocompletePanel = this.autocompletePanel.el.nativeElement.querySelector('.ui-autocomplete-panel');
    if (autocompletePanel) {
      this.renderer.listen(autocompletePanel, 'scroll', event => {
        if ((event.target.scrollHeight - event.target.clientHeight) === event.target.scrollTop)) {
          // ... handle it
          console.log('scrolled to the bottom of the panel');
        }
      }
    }
  }, 500);
}