Typescript 中的闭包

Question

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

在 AfterViewInit 接口方法中，我创建了如下的 fullClendar 对象：

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

  })

display 是这个组件类的字段。当 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;
  }

})