如何在角度为4的Perfect-scrollbar中启用自动滚动? [英] how to enable autoscrolling in perfect-scrollbar with angular 4?

问题描述

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

documentation is not being very helpful here. I want to use the perfect scroll-bar in my application so that I bypass issues of compatibility with all browsers. I initialized my code exactly as described here https://github.com/zefoy/ngx-perfect-scrollbar/tree/4.x.x/ . This is what I did in my html

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

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

现在对于每个新消息，我希望容器自动滚动到最新消息.进一步阅读文档，我发现有调用事件的指令.在我之前链接的文档末尾有介绍.因此，我的方法是在同一组件中执行以下操作:

now for each new message I want the container to autoscroll to the latest message. Reading further the documentation I found that there'are directives to call events. that is described at the end of the document I linked earlier. So my approach has been the following in the same component:

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

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

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

这给了我一个错误，因为它期望PerfectScrollbarComponent成为提供者.完成该操作后，出现另一个错误，没有提供ElementRef！的提供程序.

This gives me an error because it's expecting PerfectScrollbarComponent to be a provider. After I do that, I get another error No provider for ElementRef!.

我为此失去了睡眠.谁能对在角度4中用perfectscrollbar实现自动滚动提出建议吗? 预先谢谢你

I am loosing my sleep over this. Can anyone suggest a suggestion on how to implement autoscrolling with perfectscrollbar in angular 4? Thank you in advance

推荐答案

我也花了很多时间来解决此问题，如下所示:

I also spent a lot of time on this and solved this problem as follows:

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

这篇关于如何在角度为4的Perfect-scrollbar中启用自动滚动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！