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

Question

我已经实现了primeng-autocomplete，我需要在滚动结束时加载下一个元素。我已经完成了primeng已关闭的问题并找到了这个：

https://github.com/primefaces/primeng/issues/513

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

标签： angularprimeng

Answer 1

我有解决方法，但我希望有人有更好的选择。Angular v.7，primeng v.7：

在模板中：

1. 添加完成方法：

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

在 *.ts 文件中：

1. 添加对自动完成的引用：

@ViewChild('autocompletePanel') autocompletePanel;

2. 在构造函数中注入 Renderer2：

constructor(private renderer: Renderer2){}

3. 添加处理程序：

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);
}