jQuery事件的回调角函数

Question

我正在使用angular5并尝试获取fullcalendar.io jquery插件的dayclick（）事件，以回到Angular组件，以便我可以打开一个从日历详细信息填充的角度组件对话框。

设置示例在控制台中执行此操作：

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

更新到gangular-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绑定到您的AppComponent。这样，您可以直接调用组件中定义的任何功能。

Answer 2

在这里您可以做到这一点。最好使用箭头功能。

html代码

<div id="test" #clicktag (click)="Clicked()" hidden="true"></div>

JS代码

import { ViewChild, Component, ElementRef } from '@angular/core';
@ViewChild('clicktag') clicktag:ElementRef;
ngOnInit(){
  $('#calendar').fullCalendar({
    dayClick:(date, jsEvent, view) => {
      $(jsEvent.currentTarget).css('background-color', 'red');
      $(this.clicktag.nativeElement).text(date.format());
      $(this.clicktag.nativeElement).trigger( "click" );
    }
  });
  $('#calendar').fullCalendar('changeView', 'agendaDay');
}

您仍然可以查看此答案https://stackoverflow.com/a/36639596/6261137。在这里，他们仅使用角度触发单击

import { ViewChild, Component, ElementRef, Renderer } from '@angular/core';
@ViewChild('clicktag') clicktag:ElementRef;
constructor(private renderer:Renderer) {}
ngOnInit(){
  let eventClick = new MouseEvent('click', {bubbles: true});
  $('#calendar').fullCalendar({
   dayClick:(date, jsEvent, view) => {
    $(jsEvent.currentTarget).css('background-color', 'red');
    $(this.clicktag.nativeElement).text(date.format());
    this.renderer.invokeElementMethod(this.clicktag.nativeElement, 'dispatchEvent', [eventClick]);
  }
 });
 $('#calendar').fullCalendar('changeView', 'agendaDay');
}