如何使用 Angular 在完整日历中切换日、周、月和年视图？

问：

我正在使用最新版本的 fullcalendar v6。

这是我尝试过的 StackBlitz 代码。

我正在尝试动态切换完整的日历视图，但运气不好

这是我的代码。 当我在这里分配所有视图时，第一次就可以正常工作。

@ViewChild('calendar') calendarComponent!: FullCalendarComponent;
  calendarOptions: CalendarOptions = {
    plugins: [dayGridPlugin],
    initialview: 'dayGridDay'
  };

但是我们如何像下面的代码一样动态地更改视图。 我尝试了多种方法，但没有找到任何解决方案。我们怎样才能做到这一点？

  calendarViewOption(event: any){
    if(event === 1){
      this.calendarComponent.getApi().changeView('dayGridDay');
      this.calendarOptions.plugins = [dayGridPlugin];
    } 
    else if(event === 2) {
      this.calendarComponent.getApi().changeView('timeGridWeek');
      this.calendarOptions.plugins = [timeGridPlugin];
    }
    else if(event === 3) {
        this.calendarComponent.getApi().changeView('dayGridMonth');
        this.calendarOptions.plugins = [dayGridPlugin];
    }
    else if(event === 4) {
      this.calendarComponent.getApi().changeView('multiMonthYear');
      this.calendarOptions.plugins = [multiMonthPlugin,interactionPlugin];
    }

    if (this.calendarComponent) {
      this.calendarComponent.getApi()?.render();
    }
    
  }

<full-calendar #calendar [options]="calendarOptions" id="mxCalendar"></full-calendar>
<button (click)="calendarViewOption(1)">View Day</button>
<button (click)="calendarViewOption(2)">View Week</button>
<button (click)="calendarViewOption(3)">View Month</button>
<button (click)="calendarViewOption(4)">View Multi-Month Year</button>

编辑：

使用完整日历视图未更改 第一次说请确保您已加载所有必要的插件时，我已经添加了所有插件。我还放了设置超时功能。

第二次它没有给出错误，也没有更新视图 这是图片