angular - ngx-perfect-scrollbar：如何从打字稿中引用指令？

Question

我正在使用ngx-perfect-scrollbar我的 Angular 5 项目。div当路线改变时，我想滚动到顶部。

仪表板.html

<div class="main-panel" [perfectScrollbar] #perfectscroll>
    <router-outlet></router-outlet>
</div>

仪表板.ts

@Component({
    selector: 'app-dashboard',
    templateUrl: './dashboard.component.html',
})
export class DashboardComponent implements OnInit {
    @ViewChild('perfectscroll') perfectscroll: PerfectScrollbarDirective;

    ngOnInit() {
        this.router.events.subscribe((evt) => {
            if (!(evt instanceof NavigationEnd)) {
                return;
            }
            this.perfectscroll.scrollToTop()
        });
    }
}

但我得到这个错误：

TypeError: _this.perfectscroll.scrollToTop 不是函数

Answer 1

看看我的工作示例。

在模板中：

<div class="perfectScroll" [perfectScrollbar] #psLeft="ngxPerfectScrollbar">...</div>
...
<div class="perfectScroll" [perfectScrollbar] #psRight="ngxPerfectScrollbar">...</div>

...

在组件中：

@ViewChild('psLeft') psLeft: PerfectScrollbarDirective;
@ViewChild('psRight') psRight: PerfectScrollbarDirective;
...
if (this.psRight) {
    this.psRight.scrollToTop();
}

Answer 2

只需使用这个：@ViewChild(PerfectScrollbarDirective) perfectscroll: PerfectScrollbarDirective;

您将拥有实例，然后您可以调用诸如 scrollToTop() 之类的函数

Answer 3

它对我有用

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

Answer 4

所有这些解决方案都不适合我。我已经固定如下

scrollUp(): void {
  const container = document.querySelector('.main-panel');
  container.scrollTop = 0;
}