如何在角度为 4 的完美滚动条中启用自动滚动？

Question

文档在这里不是很有帮助。我想在我的应用程序中使用完美的滚动条，这样我就可以绕过与所有浏览器的兼容性问题。我完全按照这里的描述初始化了我的代码https://github.com/zefoy/ngx-perfect-scrollbar/tree/4.xx/。这就是我在我的 html 中所做的

<perfect-scrollbar id="chat" [config]="config"> <li *ngFor="let message of messages"> {{messages}} <li> </perfect-scrollbar>

现在对于每条新消息，我希望容器自动滚动到最新消息。进一步阅读文档，我发现有调用事件的指令。这在我之前链接的文档末尾进行了描述。所以我的方法在同一个组件中如下：

import {PerfectScrollbarComponent } from 'ngx-perfect-scrollbar';
...

constructor(private scrollbar:PerfectScrollbarComponent) { }
...

  ngDoCheck() {
    var chat = document.getElementById('chat');
    this.scrollbar.directiveRef.scrollToBottom(chat.scrollHeight);
  }

这给了我一个错误，因为它期望 PerfectScrollbarComponent 是一个提供者。执行此操作后，我收到另一个错误 No provider for ElementRef!。

我为此失眠了。任何人都可以就如何在角度 4 中使用完美滚动条实现自动滚动提出建议吗？先感谢您

Answer 1

我也花了很多时间在这上面，解决了这个问题，如下：

HTML：

<perfect-scrollbar class="window__list">
  ...
</perfect-scrollbar>

成分：

...
import { PerfectScrollbarComponent } from 'ngx-perfect-scrollbar';

export class ChatWindowComponent implements OnInit {
   ...
   // Linking to component that using perfect-scrollbar
   @ViewChild(PerfectScrollbarComponent) public directiveScroll: PerfectScrollbarComponent;
   ...
   constructor() { }
   ...
   toBottom(): void {
     if (isUndefined(this.directiveScroll)) return;
     this.directiveScroll.directiveRef.scrollToBottom(0, 100)
  }
}