如何在 angular 中调用 ngx-perfect-scrollbar update()

Question

我使用"ngx-perfect-scrollbar": "^5.3.5"。我将描述添加为“查看更多”和“查看更少”，并且页面上有滚动。当执行“查看更多”和“查看更少”点击操作时，完美的滚动条不会自我更新，底部还有一个额外的空白。.html<div class="col-12 ps" [perfectScrollbar]="scrollConfig"><div class="seeMoreContent" *ngIf="seeMore === true">----------</div><div class="seeLessContent" *ngIf="seeMore === false">----------</div> <span (click)="updateSeeMore('seeMore')" class="seeMore">See more</span><span (click)="updateSeeMore('seeLess')" class="seeLess">  See Less</span></div>.tsscrollConfig = {    suppressScrollX: false,    suppressScrollY: false};updateSeeMore(type){if(type === 'seemore'){ this.seeMore = true;}else{ this.seeMore = false;}// Want to update the scroll here}   

Answer 1

你可以这样使用

<perfect-scrollbar

                #perfectScroll

                [config]="psConfig"

                [scrollIndicators]="true"

                (psScrollY)="onListScroll()">

</perfect-scrollbar>

内部组件文件

import { PerfectScrollbarConfigInterface, PerfectScrollbarComponent } from 'ngx-perfect-scrollbar';

@ViewChild('perfectScroll') perfectScroll: PerfectScrollbarComponent;

现在你可以在你想要更新滚动的方法中使用它

this.perfectScroll.directiveRef.update(); //for update scroll

this.perfectScroll.directiveRef.scrollToTop(offset?, speed?); //for update scroll

Answer 2

尝试对您的组件使用以下方式：

import { PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';

@ViewChild(PerfectScrollbarDirective, { static: false }) perfectScrollbarDirectiveRef?: PerfectScrollbarDirective;

this.perfectScrollbarDirectiveRef.update();
this.perfectScrollbarDirectiveRef.scrollToTop(0, 1);