ngx-perfect-scrollbar:如何从typescript引用指令?

时间:2018-03-16 14:54:15

标签: angular scroll perfect-scrollbar

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

dashboard.html

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

dashboard.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不是函数

3 个答案:

答案 0 :(得分:0)

只需使用以下命令: @ViewChild(PerfectScrollbarDirective)perfectscroll:PerfectScrollbarDirective;

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

答案 1 :(得分:0)

看看我的工作示例。

在trmplate中:

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

答案 2 :(得分:0)

所有这些解决方案都不适合我。我已经像下面一样固定了

from PyQt5 import QtCore, QtGui, QtWidgets


class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(345, 340)
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setObjectName("centralwidget")

        self.listWidget = QtWidgets.QListWidget(self.centralwidget)
        self.listWidget.setGeometry(QtCore.QRect(40, 70, 256, 192))
        self.listWidget.setObjectName("listWidget")
        MainWindow.setCentralWidget(self.centralwidget)

        self.selectall_initial_listwidget = QtWidgets.QListWidgetItem('(Select All)')
        self.selectall_initial_listwidget.setCheckState(QtCore.Qt.Unchecked)
        self.listWidget.addItem(self.selectall_initial_listwidget)

        names_list = ['Jessa', 'Aejes', 'Jerome', 'Bajesryn', 'James', 'Junrey']

        self.widget_list = []

        for name in names_list:
            self.widget_item = QtWidgets.QListWidgetItem(name)
            self.widget_item.setCheckState(QtCore.Qt.Unchecked)
            self.widget_list.append(self.widget_item)
            self.listWidget.addItem(self.widget_item)

        self.listWidget.sortItems(QtCore.Qt.AscendingOrder)

        self.lineEdit = QtWidgets.QLineEdit(self.centralwidget)
        self.lineEdit.setGeometry(QtCore.QRect(40, 30, 251, 20))
        self.lineEdit.setObjectName("lineEdit")

        self.retranslateUi(MainWindow)
        QtCore.QMetaObject.connectSlotsByName(MainWindow)


    def retranslateUi(self, MainWindow):
        _translate = QtCore.QCoreApplication.translate
        MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow"))


if __name__ == "__main__":
    import sys
    app = QtWidgets.QApplication(sys.argv)
    MainWindow = QtWidgets.QMainWindow()
    ui = Ui_MainWindow()
    ui.setupUi(MainWindow)
    MainWindow.show()
    sys.exit(app.exec_())