如何在 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>

.ts

scrollConfig = {

    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&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; #perfectScroll&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [config]="psConfig"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [scrollIndicators]="true"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; (psScrollY)="onListScroll()"></perfect-scrollbar>内部组件文件import { PerfectScrollbarConfigInterface, PerfectScrollbarComponent } from 'ngx-perfect-scrollbar';@ViewChild('perfectScroll') perfectScroll: PerfectScrollbarComponent;现在你可以在你想要更新滚动的方法中使用它this.perfectScroll.directiveRef.update(); //for update scrollthis.perfectScroll.directiveRef.scrollToTop(offset?, speed?); //for update scroll

Answer 2

尝试对您的组件使用以下方式：import&nbsp;{&nbsp;PerfectScrollbarDirective&nbsp;}&nbsp;from&nbsp;'ngx-perfect-scrollbar';@ViewChild(PerfectScrollbarDirective,&nbsp;{&nbsp;static:&nbsp;false&nbsp;})&nbsp;perfectScrollbarDirectiveRef?:&nbsp;PerfectScrollbarDirective;this.perfectScrollbarDirectiveRef.update(); this.perfectScrollbarDirectiveRef.scrollToTop(0,&nbsp;1);