javascript - 来自 jquery 事件的回调函数

Question

我正在使用 Angular5 并尝试让 fullcalendar.io jquery 插件的 dayClick() 事件回调到 Angular 组件，这样我就可以打开一个从日历详细信息填充的 Angular 组件对话框。

要设置示例，请在控制台中执行此操作:

ng new pjt
cd pjt
npm install jquery fullcalendar --save

更新 .angular-cli.json 以包含

[styles]
"../node_modules/fullcalendar/dist/fullcalendar.min.css"

[scripts]
"../node_modules/jquery/dist/jquery.js",
"../node_modules/moment/min/moment.min.js",
"../node_modules/fullcalendar/dist/fullcalendar.min.js"

添加到 main.ts

import * as jQuery from "jquery";
(window as any).$ = (window as any).jQuery = jQuery;

更新 app.component.html

<div id='calendar'></div>
<div id="test" (click)="Clicked()" hidden="true"></div>

添加到 app.component.ts

import 'fullcalendar';
declare let $:any;

@Component({...})
export class AppComponent {
...

  ngOnInit(){
    $('#calendar').fullCalendar({

      dayClick: function(date, jsEvent, view) {

          //alert('Clicked on: ' + date.format());
          $(this).css('background-color', 'red');

  ***** WANT A BETTER WAY TO CALL NG CLICKED() FUNCTION HERE TO REPLACE THE FOLLOWING 2 LINES *****
          document.getElementById("test").innerText = date.format();
          document.getElementById("test").click();
      }
    });

    $('#calendar').fullCalendar('changeView', 'agendaDay');
  }

  Clicked() {
    alert("Alert from ng func");
  }
}

然后 ng server 并单击日历的日期安排部分。

注意这是 angular 5，所以它看起来不像 ng-controller 或 ng v1 的范围似乎是执行此操作的正确方法。我正在寻找一种更简洁的方法来调用函数，而无需使用“测试”div。

Answer 1

基于您要删除 <div id="test"> 的事实用箭头函数调用替换您的函数调用:

dayClick: (date, jsEvent, view) => {
    this.clicked(date, jsEvent, view);
}

修改您的点击事件以接受从完整日历事件传递的参数:

Clicked(date, jsEvent, view) {
// do something with new inputs..
alert("Alert from ng func");
}

使用箭头函数语法允许 this绑定(bind)到您的 AppComponent。这样您就可以直接调用您喜欢在组件中定义的任何函数。