Angular9集成ng2-daterangepicker遇Can't bind to 'options'错误求助

问题核心原因 #

你遇到的Can't bind to 'options' since it isn't a known property of 'div'错误，本质是Angular未识别到daterangepicker指令的输入属性，大概率是模块导入不完整，导致指令未被Angular注册。

分步解决方案 #

1. 补全AppModule中的模块导入 #

你提到已在AppModule导入模块，但从代码看仅在组件中导入了DaterangepickerConfig，必须确保DaterangepickerModule被添加到AppModule的imports数组中：

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DaterangepickerModule } from 'ng2-daterangepicker';
import { CallTagsComponent } from './list.component';

@NgModule({
  declarations: [CallTagsComponent],
  imports: [BrowserModule, DaterangepickerModule], // 必须添加此行
  providers: [],
  bootstrap: [CallTagsComponent]
})
export class AppModule { }

2. 修正模板中的事件绑定 #

ng2-daterangepicker的标准事件名称并非applyDaterangepicker和showDaterangepicker，需改为官方定义的apply和show，同时保留options属性绑定：

<div 
class="input-group" daterangepicker 
[options]="picker1" 
(selected)="selectedDate($event, chosenDate)"
(apply)="applyDatepicker($event)" 
(show)="calendarEventsHandler($event)">
  <span class="form-control uneditable-input" name="daterange">
    {{ chosenDate.start | date:'mediumDate' }} - {{ chosenDate.end| date:'mediumDate' }}
  </span>
  <span class="input-group-btn">
    <a type="button" class="btn btn-default"><i class="glyphicon glyphicon-calendar"></i></a>
  </span>
</div>

3. 调整moment导入与配置细节 #

• Angular9中建议使用标准的moment导入方式：

  import * as moment from 'moment';
  

• 修正picker1中的isInvalidDate方法：该方法需返回布尔值，自定义样式通过invalidDateClass配置：

  public picker1 = {
    opens: 'left',
    startDate: moment().subtract(5, 'day'),
    endDate: moment(),
    isInvalidDate: function (date: any) {
      return date.isSame('2017-09-26', 'day'); // 返回布尔值标记无效日期
    },
    invalidDateClass: 'mystyle' // 绑定自定义样式类
  }
  

验证操作 #

1. 重新编译项目：执行ng serve
2. 检查控制台是否仍有属性绑定错误
3. 点击日期选择器，验证日历弹窗、日期选择、事件回调是否正常工作

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