帶有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>