完整日历 v4 角度 7 自定义按钮

Question

我正在我的组件html(角度版本7(中设置fullCalendar v4，但似乎无法获得自定义按钮。

我已经尝试了各种不同的语法组合，但还没有遇到正确的语法组合。我也去了 FC 提供的演示项目，找不到自定义按钮的示例。

组件.html

<full-calendar
#calendar
defaultView="dayGridMonth"
[customButtons]="{
filter: {
text: 'filter',
click: 'open()'
}
}"
[header]="{
center: 'title',
left: 'filter,dayGridMonth,timeGridWeek,timeGridDay',
right: 'prev, next today'
}"
[plugins]="calendarPlugins"
[events]="selectedEvents"
></full-calendar>
<!-- <div class="col col-md-offset-1">
<div class="card card-calendar">
<div class="card-content">
<div id="fullCalendar"></div>
</div>
</div>
</div> -->
</div>

比较

open() {
var type = '';
var content = this.login;
this.getLocationBatches();
this.getRooms();
if (type === 'sm') {
console.log('aici');
this.modalService.open(content, { size: 'sm' }).result.then(
result => {
this.closeResult = `Closed with: ${result}`;
},
reason => {
this.closeResult = `Dismissed ${this.getDismissReason(
reason
)}`;
}
);
} else {
this.modalService.open(content).result.then(
result => {
this.closeResult = `Closed with: ${result}`;
},
reason => {
this.closeResult = `Dismissed ${this.getDismissReason(
reason
)}`;
}
);
}
}

单击自定义按钮时出错

ERROR TypeError: customButtonProps.click.call is not a function
at HTMLButtonElement.buttonClick (main.js:6035)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Object.onInvokeTask (core.js:17280)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:498)
at invokeTask (zone.js:1744)
at HTMLButtonElement.globalZoneAwareCallback (zone.js:1770)
defaultErrorLogger @ core.js:15714
push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:15762
next @ core.js:17761
schedulerFn @ core.js:13505
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:192
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:130
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:76
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:53
push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:47
push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:13489
(anonymous) @ core.js:17311
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150
push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:17248
onHandleError @ core.js:17311
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.handleError @ zone.js:395
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:198
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
invokeTask @ zone.js:1744
globalZoneAwareCallback @ zone.js:1770

我从 v3 升级，在那里我的日历运行良好。在 v4 中，所有功能都在 html 中处理，语法上略有不同。

Answer 1

尝试使用此方法之一，但您需要在组件端定义该选项，请查看演示：

click: () => this.open()

或

click: this.open.bind(this)

工作演示