angular-calendar头部组件实现求助：日期格式化与视图切换报错

我之前在使用angular-calendar的时候也碰到过类似的问题，给你分享下我的解决思路：

问题1：动态视图标题管道报错 this.dateFormatter[method] is not a function #

你遇到的问题是当动态拼接视图标题参数（view + 'ViewTitle'）时出错，但写死'dayViewTitle'就正常，主要有几个可能的原因和解决办法：

• 确保view变量的取值合法：view只能是'day'、'week'、'month'这几个有效值，不能有拼写错误（比如写成'days'就会导致拼接后的'daysViewTitle'不存在）。可以在组件里给view设置初始值，比如：

  view: 'day' | 'week' | 'month' = 'day';
  

• 确认日期格式化器已正确配置：如果没有在模块中正确提供CalendarDateFormatter，管道就找不到对应的格式化方法。确保你的模块导入代码是这样的：

  import { CalendarModule, CalendarNativeDateFormatter, CalendarDateFormatter } from 'angular-calendar';
  
  @NgModule({
    imports: [CalendarModule.forRoot()],
    providers: [
      { provide: CalendarDateFormatter, useClass: CalendarNativeDateFormatter }
    ]
  })
  export class YourModule {}
  

• 尝试明确表达式优先级：有时候模板的表达式解析可能有歧义，你可以给动态拼接的部分加一层括号，确保正确解析：

  <h3>{{ viewDate | calendarDate:((view) + 'ViewTitle'):'en' }}</h3>
  

问题2：切换视图时报错 TypeError: addFn is not a function #

这个错误是因为切换视图的指令找不到对应的日期增量函数，解决步骤如下：

• 检查视图切换指令的绑定是否正确：确保你的切换按钮正确绑定了view和viewDate，比如：

  <button mwlCalendarPreviousView [view]="view" [(viewDate)]="viewDate">上一日</button>
  <button mwlCalendarNextView [view]="view" [(viewDate)]="viewDate">下一日</button>
  

• 确认viewDate是合法的Date对象：如果viewDate是字符串或者其他类型，指令无法调用增量方法。在组件里初始化viewDate时要确保是Date类型：

  viewDate: Date = new Date();
  

• 检查模块导入和适配器配置：如果你使用了自定义日期库（比如Moment.js），要确保正确配置了对应的日期适配器。比如用Moment的话，模块导入应该是：

  import { CalendarModule, MomentDateAdapter, DateAdapter } from 'angular-calendar';
  
  @NgModule({
    imports: [CalendarModule.forRoot({
      provide: DateAdapter,
      useClass: MomentDateAdapter
    })]
  })
  export class YourModule {}
  

  如果用原生Date对象，默认的适配器就可以，但要确保没有错误覆盖适配器配置。
• 升级angular-calendar到最新稳定版：这个错误可能是旧版本的已知bug，升级到最新版通常能解决这类兼容性问题。

内容的提问来源于stack exchange，提问作者Fülöp Köta