jquery - Typescript 中的闭包

Question

我有 Angular2/Typescript 网站。我正在使用 PrimeNG 框架来实现 CSS。在我的网站中，我有 jQuery 完整日历。我想要实现的是当单击事件时 - 模式出现。

在 AfterViewInit 接口(interface)方法中，我创建了 fullClendar 对象，如下所示:

  $("#calendar").fullCalendar({
   //..some properties
   eventClick: function (calEvent) {
                this.display = true;
    }

  })

display 是该组件类上的字段。当显示设置为 true 时，应该出现模态 - 将其设置为 true 不会显示模态。

但是我在同一页面中有一个带有 onClick 处理程序的按钮

public showDialog() {
        this.display = true;
    }

单击按钮显示模式。

有 HTML

<div class="ui-g dashboard" style="margin-top: -18px">

  <div class="ui-g-12 ui-md-12">
    <div class="card">
      <div id="calendar"></div>
    </div>
  </div>
</div>
<p-dialog header="Godfather I" [(visible)]="display" modal="modal" width="300" responsive="true">
  <p>dadsasd</p>
  <p-footer>
    <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
      <button type="button" pButton icon="fa-close" (click)="display=false" label="No"></button>
      <button type="button" pButton icon="fa-check" (click)="display=false" label="Yes"></button>
    </div>
  </p-footer>
</p-dialog>
<button type="text" (click)="showDialog()" pButton icon="fa-external-link-square" label="Show"></button>

问题是什么？

Answer 1

Jquery 很可能将 id #calendar 的元素设置为 this。

您可以使用箭头函数来保持相同的上下文。

$("#calendar").fullCalendar({
  //..some properties
  eventClick: (calEvent) => {
    this.display = true;
  }

})