如何在javascript函数中使用/绑定角度变量答案

【问题标题】：How to use/bind angular variable in javascript function如何在javascript函数中使用/绑定角度变量
【发布时间】：2019-01-15 16:33:09
【问题描述】：

我有一个使用 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();
  }
}

感谢您的帮助。

【问题讨论】：

标签： javascript angular

【解决方案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

  }
});

【讨论】：

非常感谢，使用它非常有效，但箭头功能根本不起作用。

【解决方案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，然后在您的eventClick 回调中调用this.cd.markForCheck()

【讨论】：

谢谢，但是当我使用箭头功能时出现错误。找不到信息值。