angular - 如何在 Angular 为 4 的完美滚动条中启用自动滚动？

Question

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

我为此失眠了。谁能就如何在 Angular 4 中使用 perfectscrollbar 实现自动滚动提出建议？ 提前谢谢你

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