Question

我正在使用TypeSCript运行Angular 1.5项目，我遇到了一些错误。我想检查scrollTop元素中的.uc-card值。

public container = document.querySelector(".uc-card");

在$onInit我有：

public $onInit() {
    this.scroll(this.container);
    this.doSomething();   

    this.container.addEventListener('scroll', function() {

        console.log('scrollOnInit');                
        this.scroll(this.container);
        this.doSomething();

    });
}

我有两个功能，scroll和doSomething：

private doSomething() {
    console.log('doSomething');
}

private scroll(e) {
    console.log('scroll')
    console.log(e.scrollTop);
    console.log(this.container.scrollTop);
}

当我运行应用程序时，我在控制台日志中得到以下内容：

scroll
0
0
doSomething

这很好用。我返回scrollTop元素的.uc-card值。但是当我滚动时，我得到以下内容：

scrollOnInit

CustomerActivitiesComponent.ts:38 Uncaught TypeError：this.doSomething不是HTMLDivElement函数。（CustomerActivitiesComponent.ts：38）

滚动功能确实有效，因为输出显示scrollOnInit。但是scroll函数没有被调用（或者至少没有显示任何输出），doSomething方法不是函数。但它们在onInit中都运行良好。

Answer 1

使用arrow function, =>。常规函数语法与外部语句保持不同this。

public $onInit() {
    this.scroll(this.container);
    this.doSomething();   
    // Setting event handler with arrow function guarantees `this` will be
    // the same as this it is here
    // It is like setting const _this = this, and using _this within the 
    // regular function
    this.container.addEventListener('scroll', () => {

        console.log('scrollOnInit');                
        this.scroll(this.container);
        this.doSomething();

    });
}

addEventListener

1 个答案: