我正在使用 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。