Ionic3使用Angular Calendar报错：Can't bind to 'view'不是div已知属性

嘿，作为刚接触Ionic的开发者，遇到这个问题太正常啦！我来帮你一步步搞定它：

问题根源 #

这个错误本质上有两个核心原因：

• 你没有正确导入Angular Calendar的核心模块，导致Angular不认识view这个输入属性；
• 你把view属性错误地绑定到了普通<div>上，而不是Angular Calendar提供的专用组件标签。

解决步骤 #

1. 安装兼容Ionic3的依赖版本

Ionic3对应的是Angular 5.x，而最新版的Angular Calendar已经不兼容这个版本了，所以得装适配的旧版本：

npm install angular-calendar@0.25.0 date-fns@2.0.0-alpha.27 --save

（注：指定date-fns版本是因为新版本和旧版angular-calendar存在依赖冲突）

2. 在app.module.ts中导入必要的模块

你需要把CalendarModule和BrowserAnimationsModule添加到模块的imports数组里，这样Angular才能识别日历相关的指令和属性。修改后的代码片段如下：

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

// 新增导入Calendar和动画模块
import { CalendarModule } from 'angular-calendar';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    // 把这两个模块加入imports
    BrowserAnimationsModule,
    CalendarModule.forRoot(),
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

3. 在页面HTML中正确使用Calendar组件

别再把view绑在普通<div>上啦！要用Angular Calendar提供的<mwl-calendar>标签，示例代码：

<mwl-calendar 
  [view]="calendarView"
  [events]="events"
  [viewDate]="viewDate"
></mwl-calendar>

4. 在页面TS文件中定义对应的变量

确保你在页面组件里声明了HTML中绑定的变量：

import { Component } from '@angular/core';
import { CalendarView } from 'angular-calendar';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  // 定义日历视图类型，默认月视图
  calendarView: CalendarView = CalendarView.Month;
  // 视图默认显示当前日期
  viewDate: Date = new Date();
  // 日历事件数组，可根据需求填充数据
  events = [];
}

做完这些步骤后，重启你的Ionic项目，这个错误应该就消失啦！

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