如何在 Angular 中为 FullCalendar 设置多个属性

Question

我正在尝试在 Angular 应用程序中为 FullCalendar 设置一些特定选项，例如 locale、themeSystem。我在网上发现人们使用[options] 属性设置这些选项，但似乎FullCalendar 第4 版没有这样的属性。

任何适用的指令或 fullcalendar 元素均未提供属性选项

我也尝试过使用 api。

import { Component, OnInit, ViewChild } from '@angular/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import { FullCalendarComponent } from '@fullcalendar/angular';
import { OptionsInput } from '@fullcalendar/core/types/input-types';

export class AppComponent implements OnInit {

  @ViewChild('calendar') calendarComponent: FullCalendarComponent;

  options: OptionsInput;

  constructor() {

  }

  calendarPlugins = [dayGridPlugin];

  ngOnInit(): void {
    this.options = {
      locale: 'pl',
      themeSystem: 'bootstrap'
    };
    const api = this.calendarComponent.getApi();
    api.setOptions(this.options);
    api.render();
  }
}

<full-calendar
  #calendar
  defaultView="dayGridMonth"
  [plugins]="calendarPlugins">
</full-calendar>

但我明白了

ERROR TypeError: Cannot read property 'setOptions' of undefined

如何在不为类中的每个属性创建的情况下设置多个选项？

Answer 1

此错误表示此对象中不存在此 setOption，请检查您的日历参考，当您设置选项时它是否正确初始化，有时日历处于初始化阶段，我们正在设置值。在 SetTimeOut 中添加 500 毫秒这样的选项。在 500 毫秒内，您的日历将初始化

          ngOnInit(): void {
            this.options = {
              locale: 'pl',
              themeSystem: 'bootstrap'
            };
           setTimeout(()=>{ 
    const api = this.calendarComponent.getApi();
            api.setOptions(this.options);
            api.render();
           },500);
          }
    }

或者你可以使用这个 ngAfterViewInit

   ngAfterViewInit(){
     const api = this.calendarComponent.getApi();
                api.setOptions(this.options);
                api.render();
}