Question

有时候在Typescript中，“ this”变得有些模棱两可。通常，我可以做的是在绑定“ this”时从另一个函数中调用一个函数，例如

this.myFunction.bind(this);

这样，当myFunction（）调用this.whatever()时，它知道什么是“ this”。

但是在这种情况下，我有点迷路了。我正在将JQuery与Angular结合使用，老实说，从不建议这样做，但是有时您必须使用给出的内容。无论如何，下面的代码正在调用名为“ getSlice（）”的函数，这是从ngAfterViewInit（）事件函数调用的JQuery循环内。如何正确调用getSlice（）以便代码可以找到它？

getSlice(val): TimeSlice {
    const data = val.split(' ');
    const slice = new TimeSlice(val[0], val[1], val[2]);
    return slice;
}

ngAfterViewInit(): void {
    let current: TimeSlice = new TimeSlice();
    $('#selectable').selectable({
        stop: function() {
            const result = $('#select-result').empty();
            $('li.ui-selected', this).each(function() {
                const val = $(this).attr('value');
                current = this.getSlice(val); <!-- Here is the problem child -->
            });
        }
    });
}

Answer 1

为了安全起见，您可以预先创建函数：

ngAfterViewInit(): void {
    let getSlice = val => this.getSlice(val);

    // Or do this
    // let getSlice = this.getSlice.bind(this);

    $('#selectable').selectable({
        stop: function() {
            const result = $('#select-result').empty();
            $('li.ui-selected', this).each(function() {
                const val = $(this).attr('value');
                current = getSlice(val);
            });
        }
    });
}

Answer 2

您可以保留this上下文的引用。因此，您以后可以在嵌套函数中使用它。

getSlice(val): TimeSlice {
    const data = val.split(' ');
    const slice = new TimeSlice(val[0], val[1], val[2]);
    return slice;
}

ngAfterViewInit(): void {
    let self =  this; //<-- keep `the` reference of Component
    let current: TimeSlice = new TimeSlice();
    $('#selectable').selectable({
        stop: function() {
            const result = $('#select-result').empty();
            $('li.ui-selected', this).each(function() {
                const val = $(this).attr('value');
                current = self.getSlice(val); <!-- Use self here -->
            });
        }
    });
}

Typescript，JQuery，Angular和“ this”范围

2 个答案: