带有Angular 4的Ionic3中的FullCalendar

Question

如何在Ionic 3和Angular 4上的事件（例如，单击）中初始化fullCalendar？

在变量中设置日历选项时，此代码有效：

 calendarOptions: Object = {
    fixedWeekCount: true,
    editable: true
  };

但是当我调用一个函数时，不起作用：

 buildCalendar(): void{
  this.calendarOptions: Object = {
    fixedWeekCount: true,
    editable: true
  };
 }

日历称为的HTML代码

<angular2-fullcalendar 
          [options]="calendarOptions" 
          (initialized)="onCalendarInit($event)"></angular2-fullcalendar>

调用buildCalendar的角度代码：

getAging(): void {

    this.myProvider.getAging()
      .subscribe(
      (response) => {
//do something...
      }, (error) => {
        console.log(`Backend returned code ${error.status}, body was: ${error.error}`);
      }, () => {
        console.log('aging complete');
        this.buildCalendar();
      }
      )

  }

PS：在页面加载时调用getAging（） 。

从后端（API）加载数据后，我需要初始化fullCalender。

Answer 1

这个问题一般不是针对FullCalendar，而是针对特定的angular2-fullcalendar组件及其工作方式。

如果提到这一点 ，问题就很明显了。 它不会监视options输入，而是使用setTimeout hack覆盖输入中的初始更改（此处不需要100 ms的延迟）。

由于该组件非常简单，因此第一方根据其需要而不是依赖第三方解决方案来实现它是有益的。

对于此特定组件，应使用ngIf 。 它有助于防止在选项准备就绪之前对组件进行编译：

<angular2-fullcalendar *ngIf="calendarOptions"
          [options]="calendarOptions" 
          (initialized)="onCalendarInit($event)"></angular2-fullcalendar>