ionic 3切换页面后FullCalendar组件加载失败问题求助

这种情况我之前做Ionic项目时也碰到过，核心原因就是页面生命周期钩子选得不对，或者DOM还没完全渲染就执行了日历初始化代码。直接启动HomePage时，页面加载流程顺畅，DOM就绪后初始化日历没问题；但从LoginPage切换过来时，页面渲染和初始化的时机没对上，导致FullCalendar找不到目标DOM元素，自然就显示不出来了。下面给你具体的解决方案：

1. 调整FullCalendar初始化的生命周期钩子 #

把日历初始化代码从ngOnInit或ionViewDidLoad移到ionViewDidEnter里，这个钩子的触发时机是页面完全进入视图、DOM已经全部渲染完成之后，而且每次进入页面都会触发，完美适配跳转后的场景。同时还要在离开页面时销毁日历实例，避免内存泄漏。

修改HomePage的TypeScript代码：

import { Component } from '@angular/core';
declare var $: any; // 声明全局jQuery，避免TypeScript报错

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor() { }

  ionViewDidEnter() {
    // 先销毁已存在的日历实例（防止重复初始化）
    if ($('#calendar').fullCalendar('getCalendar')) {
      $('#calendar').fullCalendar('destroy');
    }
    // 初始化FullCalendar
    $('#calendar').fullCalendar({
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
      },
      editable: true,
      // 这里放你的事件数据
      events: [
        { title: '测试会议', start: '2024-05-15' },
        { title: '项目截止', start: '2024-05-20' }
      ]
    });
  }

  ionViewWillLeave() {
    // 离开页面时销毁日历，释放资源
    if ($('#calendar').fullCalendar('getCalendar')) {
      $('#calendar').fullCalendar('destroy');
    }
  }
}

2. 确保HomePage的HTML有正确的日历容器 #

检查你的HomePage模板，确保存在带正确ID的div容器：

<ion-header>
  <ion-navbar color="primary">
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <!-- 日历容器，ID要和JS里的选择器对应 -->
  <div id="calendar"></div>
</ion-content>

3. 验证index.html的资源引入顺序 #

FullCalendar依赖jQuery（旧版本还需要Moment.js），一定要保证引入顺序正确，不然会因为依赖未加载导致初始化失败：

<!-- 先引入jQuery -->
<script src="assets/js/jquery.min.js"></script>
<!-- FullCalendar v3及以下需要Moment.js，v4+不需要 -->
<script src="assets/js/moment.min.js"></script>
<!-- 再引入FullCalendar的JS -->
<script src="assets/js/fullcalendar.min.js"></script>
<!-- 引入FullCalendar的CSS -->
<link rel="stylesheet" href="assets/css/fullcalendar.min.css">
<!-- 最后引入Bootstrap的资源 -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<script src="assets/js/bootstrap.min.js"></script>

为什么直接启动HomePage正常？ #

直接启动HomePage时，页面的加载流程是同步的，DOM渲染完成后才会执行初始化代码，所以能找到日历容器；但从LoginPage跳转时，Ionic的导航栈会先加载HomePage的组件，可能DOM还没完全挂载到页面上，就执行了初始化代码，导致找不到元素，日历无法渲染。而ionViewDidEnter钩子会等页面完全显示、DOM就绪后再触发，刚好解决这个时机问题。

内容的提问来源于stack exchange，提问作者Dride