Как передать переменную Angular в функцию jQuery

Question

Я думаю, что это должно быть довольно просто, но на всю жизнь я не могу заставить его работать.

У меня есть угловая строка (заполнитель), на которую я хотел бы сослаться из функции jQuery, котораявыстрелил в $ document.ready (). В основном это то, что у меня есть:

placeholder: string;

ngOnInit() {
    this.translateService.get(['']).subscribe(translations => {
      this.placeholder = this.translateService.instant('placeholder');
      console.log('PLACEHOLDER', this.placeholder);  <<<<<<<<< has expected value
    });

    $(document).ready(function () {
      console.log('READY', this.placeholder);   <<<<<<<<< undefined
      $('#dropDown').select2({
        placeholder: this.placeholder,
        data: [
            ...
        ]
      });
    });        
}

Как мне сослаться на this.placeholder из функции jQuery?

Answer 1

вы можете использовать что-то вроде приведенного ниже кода. удалите document.ready и ключевое слово функции

используйте функцию стрелки, чтобы сохранить это в области видимости.

export class TestComponent implements OnInit {

placeholders:Array<string> = [];

constructor() { }

ngOnInit() {
  // removed function keyword and added () => {} syntax
  $('#btn').on('click', (e, arr) => {  
    console.log(this.placeholders);
  });
}

Answer 2

Когда вы используете ключевое слово function, оно определяет свое собственное this, которое переопределяет внешний this, который вы предполагали использовать:

this.placeholder = 'Foo';
$(document).ready(function () {
  console.log('READY', this.placeholder); // this is another this, local to the function
}

Существует два решения:

Со старым JS

В чистом JS вы можете просто убрать свой внешний this, чтобы использовать его внутри:

this.placeholder = 'Foo';
var that = this;
$(document).ready(function () {
  console.log('READY', that.placeholder); // that refers to the outer this
}

С современным JS (скрипт ECMA> 5)

Если вы можете использовать современный браузер со скриптом ECMA> 5, вы можете использовать функцию стрелки ()=>{} вместо function(){}, которая автоматически сохраняет внешний вид this:

this.placeholder = 'Foo';
$(document).ready(() => {
  console.log('READY', this.placeholder); // () => {} does not override this
}