使用 jQuery datepicker 和 Angular 2 更改事件答案

【问题标题】：Change event with jQuery datepicker and Angular 2使用 jQuery datepicker 和 Angular 2 更改事件
【发布时间】：2016-04-25 12:49:13
【问题描述】：

当我使用 jQuery datepicker 插件时，我在捕捉 change 事件时遇到了一些问题，我正在尝试使用 (change) 方法来捕捉更改，但似乎当我使用这个插件时，angular 不能抓住它。

@Component({
    selector: 'foo-element',
    template: '<input type="text" (change)="checkDates($event)" id="foo_date_picker" class="datepicker">'
})

export class FooComponentClass implements AfterViewInit {

    ngAfterViewInit():any{
        $('#end_day').datepicker();
    }

    private function checkDates(e){
        console.log("Please, catch the change event ): ");
    }
}

我已经删除了 datepicker 初始化并且工作正常，但是当我再次使用它时......不工作。

有人可以帮助我！

非常感谢。

【问题讨论】：

jquery datepicker会用自己的逻辑覆盖元素的change事件，请参考stackoverflow.com/questions/27506111/…
您好，感谢您的回答，但问题是当我尝试编译文件时，出现类似这样的错误：“对象文字只能指定已知属性，而 'onSelect' 不会存在于“DatepickerOptions”类型中，因此我无法编译源代码。

标签： javascript jquery datepicker angular

【解决方案1】：

您可以实现以下指令：

@Directive({
  selector: '[datepicker]'
})
export class DatepickerDirective {
  @Output()
  change:EventEmitter<string> = new EventEmitter();

  constructor(private elementRef:ElementRef) {
  }

  ngOnInit() {
    $(this.elementRef.nativeElement).datepicker({
      onSelect: (dateText) => {
        this.change.emit(dateText);
      }
    });
  }
}

这样您就可以像这样捕获change 事件：

@Component({
  selector: 'app',
  template: '<input type="text"  id="end_day" (change)="checkDates($event)" class="datepicker" datepicker>',
  directives: [ DatepickerDirective ]
})
export class App implements AfterViewInit {
  checkDates(e){
    console.log("Please, catch the change event ): "+e);
  }
}

看到这个 plunkr：https://plnkr.co/edit/TVk11FsItoTuNDZLJx5X?p=preview

【讨论】：

您的答案不起作用，但您已经教会了我另一种使用 angular 2 组件的方法！谢谢！