Typescript, JQuery, Angular и область действия this - PullRequest
Новая
       6

Typescript, JQuery, Angular и область действия this

0 голосов
/ 31 октября 2018

В Typescript бывают случаи, когда «this» становится немного двусмысленным. Часто я могу вызывать одну функцию из другой, связывая «this», например, 

this.myFunction.bind(this);

Таким образом, когда myFunction () вызывает this.whatever(), он знает, что такое this.

Однако в этом конкретном случае я немного растерялся. Я комбинирую JQuery с Angular, что, честно говоря, никогда не рекомендуется, но иногда вам приходится работать с тем, что вам дают. В любом случае, приведенный ниже код, который вызывает функцию с именем getSlice (), находится внутри цикла JQuery, который вызывается из функции события ngAfterViewInit (). Как правильно вызвать 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 -->
            });
        }
    });
}

Ответы [ 2 ]

0 голосов
/ 31 октября 2018

Вы можете создать функцию заранее, чтобы быть в безопасности: 

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);
            });
        }
    });
}
0 голосов
/ 31 октября 2018

Вы можете сохранить ссылку на контекст 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 -->
            });
        }
    });
}
...