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

但我收到此错误：

类型错误：_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();
}