如何使用 angular 2.0 在完整的日历事件处理程序中访问组件实例

Question

我正在为日历使用以下插件：

https://www.npmjs.com/package/ap-angular2-fullcalendar。

任何帮助将不胜感激

Answer 1

您可以使用@ViewChild或@ViewChildren来访问日历组件。 我个人使用 ViewChildren，因为它可以有效地处理更改事件并随时随地渲染日历。

在组件中将完整日历导入为

import { Options } from 'fullcalendar';
import {CalendarComponent} from 'angular2-fullcalendar/src/calendar/calendar';

并获取对日历组件的引用

@ViewChildren('mycal') calendar: QueryList<CalendarComponent>

我的 HTML 看起来像

<div class="ui red segment" *ngIf="dataAvailable">
<angular2-fullcalendar [options]="calOptions" id="mycal" #mycal></angular2-fullcalendar>
</div>

现在，我可以访问日历并执行操作。例如，要重新获取事件并刷新日历，我会这样做

this.calendar.forEach(div => 
{
div.fullCalendar('removeEvents');
div.fullCalendar('removeEventSources');
div.fullCalendar('addEventSource',this.events);
})

希望对你有帮助