来自 jquery 事件的回调角度函数

我正在使用 Angular5 并尝试获取 fullcalendar.io jquery 插件的 dayClick() 事件来回调角度组件，以便我可以打开从日历详细信息填充的角度组件对话框。

要设置示例，请在控制台中执行以下操作：

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");
  }
}

Then ng server并单击日历的日程安排部分。

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

基于您想要删除的事实<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绑定到您的 AppComponent。这样您就可以直接调用组件中定义的任何您喜欢的函数。