Как использовать / связать угловую переменную в функции JavaScript

Question

Я получил компонент Angular, который использует библиотеку javascript (FullCalendar V4). Библиотека вызывает функцию, когда некоторые события добавляются (при наведении курсора, клике и т. Д.) И имеют аргумент, который позволяет мне иметь доступ к значениям календаря (дата начала, дата окончания, идентификатор и т. Д.). Моя цель - получить данные из функции javascript внутри угловой переменной. Я уточняю, что если я использую console.log внутри моей функции javascript, значения отображаются идеально, но мне не удается получить эти значения внутри переменной моего компонента.

Я думаю, что это проблема охвата. Мой компонент Angular не может получить доступ к содержимому моей функции javascript, а моя функция javascript не может получить доступ к моим переменным Angular.

Вот упрощенный пример моего кода для объяснения:

//general import
import { Component} from '@angular/core';

//service
import { IcsService } from '../../_Services/ics.service';

//variables
declare const FullCalendar: any;
@Component({
    selector: 'app-scheduler',
    templateUrl: './scheduler.component.html'
})
/** scheduler component*/
export class SchedulerComponent {
  ressources: any;
  event: any;
  plop: any ; //that's the var i will use for getting my javascript variable content


  /** scheduler ctor */
  constructor(private ics_service: IcsService) {}

//Add Event and ressources, that works, no worry about it
  ngOnInit() {
    this.that = this;
    this.ics_service.GetAllRessources().subscribe(result => {
      this.ressources = result;
      console.log(this.ressources);
      this.ics_service.GetAllEvents().subscribe(result => {
        this.event = result;
        console.log(this.event);
        this.calendar();       
      });
    });   
  }

  calendar() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {

//Parameters variables are hidden here to simplify the understanding of the code

      resources: this.ressources,
      events: this.event,
      eventClick: function (info) {

       //Here is the line that i want to achieve 
      this.plop = info.event.start.toDateString();

      console.log(info.event.start.toDateString()); //that line perfectly work

      }
    });
    calendar.render();
  }
}

Спасибо за вашу помощь.

Answer 1

область действия this находится под вашим классом FullCalendar, вы можете сохранить ссылку this для вашего углового компонента в другой переменной или использовать функцию стрелки (как в ответе Danil)

...
// store your angular component `this` to another variable
var that = this;
var calendar = new FullCalendar.Calendar(calendarEl, {
//Parameters variables are hidden here to simplify the understanding of the code

  resources: this.ressources,
  events: this.event,
  eventClick: function (info) {

   // use the stored reference
  that.plop = info.event.start.toDateString();

  console.log(info.event.start.toDateString()); //that line perfectly work

  }
});

Answer 2

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

eventClick: (info) => {
      this.plop = info.event.start.toDateString();

      console.log(info.event.start.toDateString()); //that line perfectly work
}

Так что вы можете использовать this.plop, как и ожидалось

Обновление

Кроме того, поскольку вы используете стороннюю библиотеку, представление может не обновляться при щелчке. Поэтому, если обновление представления не работает, попробуйте использовать private cd: ChangeDetectorRef из внедрения зависимостей в конструкторе, а затем вызвать this.cd.markForCheck() в вашем eventClick обратном вызове