如何在Angular 2 Perfect Scrollbar包装器中调用update()方法? [英] How to call update() method of in Angular 2 Perfect Scrollbar wrapper?

问题描述

我尝试在我的Angular 2应用程序中实现Perfect Scrollbar，并使用Angular 2 Perfect Scrollbar包装器: https://github.com/zefoy/angular2-perfect-scrollbar 如果我在应用程序启动时有大量内容，则我的滚动条会出现并正常工作. 但是，如果我的内容是动态增长的，则不会出现滚动条. 我认为添加内容时必须调用Scrollbar对象的update()方法.如何从Angular 2组件中调用Perfect Scrollbar方法?

I try to implement Perfect Scrollbar to my Angular 2 Application and use Angular 2 Perfect Scrollbar wrapper: https://github.com/zefoy/angular2-perfect-scrollbar If i have large content at application start moment my scrollbar appears and works normally. But if my content grows dynamically - scrollbar is not appear. I think I have to call the update() method of Scrollbar object when content is added. How can i call Perfect Scrollbar methods from Angular 2 components?

推荐答案

一个人可以这样做.首先，插入perfect-scrollbar选择器，并在HTML模板中为其指定一个自定义ID:

One can do it like this. First, insert perfect-scrollbar selector and give it a custom ID inside an HTML template:

<perfect-scrollbar #scroll1 class="container">
   <div class="dynamic-content"></div>
</perfect-scrollbar>

然后在打字稿文件中使用定义的ID引用此元素并分配其类型:

Then in the typescript file refer to this element using defined ID and assign its type:

@ViewChild('scroll1') scroll1: PerfectScrollbarComponent;

最后，通过同一文件中任何方法内的Perfect Scrollbar组件的 directiveRef 属性调用 update()方法:

Finally, call update() method through directiveRef property of the Perfect Scrollbar component inside whatever method in the same file:

yourMethod() {
   this.scroll1.directiveRef.update();
}

这篇关于如何在Angular 2 Perfect Scrollbar包装器中调用update()方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！