这个关键字变成了这个错误

Question

所有this关键字里面的onScroll函数变成了错误的this，在函数里面它变成了window这是有道理的。我想使用=>表示法来保存this，但在这种情况下，我似乎无法弄清楚正确的语法，甚至在哪里甚至可以使它正确。

在public self = this存储this不无论是对一些奇怪的原因的工作，但我宁愿使用=>

这里的解决方案是类：

export class ScrollXDirective implements AfterContentInit { 
    @ContentChild(FormDatepickerPresetsComponent) presets: FormDatepickerPresetsComponent; 

    public posX: number = 0; 
    public offset: number = 35; 

    constructor(private _renderer: Renderer, private _elementRef: ElementRef) {} 

    ngAfterContentInit() { 

    let wrapper: HTMLElement = this.presets.presetsWrapperElement.nativeElement; 
    let scrollHandler: string = 'DOMMouseScroll' in window ? 'DOMMouseScroll' : 'mousewheel'; 

    this._renderer.listen(wrapper, scrollHandler, _.debounce(this.onScroll, 200)); 
    } 

    onScroll(e: any) { 

    e.preventDefault(); 

    let delta = (e.type === 'DOMMouseScroll' ? e.detail * -40 : e.wheelDelta); 

    let list: HTMLElement = this.presets.presetsListElement.nativeElement; 
    let totalWidth = list.offsetWidth; 

    if (delta > 0) { 

     if (this.posX >= 0) { 
     return false; 
     } 

     this.posX = this.posX + this.offset; 

     this._renderer.setElementStyle(list, 'margin-left', this.posX + 'px'); 
    } 
    else { 

     let listX = list.getBoundingClientRect().right; 
     let hostX = this._elementRef.nativeElement.getBoundingClientRect().right; 

     if (listX <= hostX) { 
     return false; 
     } 

     this.posX = this.posX - this.offset; 

     this._renderer.setElementStyle(list, 'margin-left', this.posX + 'px'); 
    } 
    } 
} 

Answer 1

，我认为它应该工作：

_.debounce(this.onScroll.bind(this), 200) 

另请参阅文档bind

另一种方式：

onScroll = (e: any) => { 
    ... 
}