Question

我有一个使用JavaScript库（FullCalendar V4）的Angular组件。当某些事件追加时（鼠标悬停，单击等）并具有一个使我能够访问日历值（开始日期，结束日期，Id等）的参数，该库将调用一个函数。我的目标是从Angular变量中的javascript函数获取数据。我明确指出，如果我在JavaScript函数中使用console.log，则可以完美显示值，但是我无法在组件变量中获取该值。

我认为这是范围问题。我的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

<input id="input"></input>的作用域在FullCalendar类下，您可以将角度组件的this参考存储到另一个变量中，或使用箭头函数（如Danil答案）

this

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

如何在JavaScript函数中使用/绑定角度变量

2 个答案: