Question

我正在使用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");
  }
}

然后ng server并点击日历的日程安排部分。

注意这是角度5因此它看起来不像ng-controller或ng v1的范围似乎是正确的方法。我正在寻找一种更简洁的方式来调用该功能，而无需进行测试＆＃39;格。

Answer 1

这是一种可以做到的方法。最好使用箭头功能。

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

Answer 2

根据您要删除List<DashboardOneData> list = new ArrayList<>(map.values());的事实，用箭头函数调用替换您的函数调用：

[DllImport("user32.dll")]
[return: MarshalAs(UnmanagedType.Bool)]
private static extern bool ShowScrollBar(IntPtr hWnd, int wBar, bool bShow);

private enum ScrollBarDirection
{
    SB_HORZ = 0,
    SB_VERT = 1,
    SB_CTL = 2,
    SB_BOTH = 3
}

protected override void WndProc(ref System.Windows.Forms.Message m)
{
    if (m.Msg == 0x85) // WM_NCPAINT
    {                
        ShowScrollBar(panel1.Handle, (int)ScrollBarDirection.SB_BOTH, false);
    }

    base.WndProc(ref m);
}

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

<div id="test">

使用箭头函数语法可以将dayClick: (date, jsEvent, view) => { this.clicked(date, jsEvent, view); }绑定到AppComponent。这样您就可以直接调用组件中定义的任何函数。

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

2 个答案: