Angular 5集成Materialize日期选择器变更时调用方法失效求助

我之前也踩过这个坑！Materialize的pickadate是基于jQuery实现的组件，它的事件系统和Angular原生的事件绑定逻辑不兼容，直接用(change)肯定抓不到日期变更的事件。给你两个靠谱的解决思路：

方法一：利用Materialize自带的回调配置 #

Materialize的pickadate允许在初始化参数里传入onSet回调，这是最直接的方式。你只需要在组件的参数配置里添加这个回调，就能捕获日期选择事件：

组件TS代码： #

import { Component } from '@angular/core';

@Component({
  selector: 'your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  // 初始化DatePicker参数，加入onSet回调
  datePickerParams = {
    // 这里可以保留你原有的配置，比如语言、日期格式等
    format: 'dd/mm/yyyy',
    onSet: function(context) {
      // 只有当用户主动选择日期时才触发
      if (context.select) {
        // 将选中的时间戳转为Date对象
        const selectedDate = new Date(context.select);
        // 调用你的dateChanged方法，注意要绑定组件上下文
        this.dateChanged(selectedDate);
      }
    }.bind(this) // 关键！绑定组件的this，否则回调里的this指向会出错
  };

  dateChanged(date: Date) {
    console.log('选中的日期:', date);
    // 这里写你的业务逻辑
  }
}

模板代码（无需修改）： #

<input materialize="pickadate" type="text" class="datepicker" placeholder="Selecione a Data" [materializeParams]=datePickerParams>

方法二：监听Materialize的jQuery事件 #

如果不想修改初始化参数，也可以通过监听pickadate:set这个jQuery事件来捕获变更：

组件TS代码： #

import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
declare var $: any; // 确保项目已引入jQuery和Materialize的JS文件

@Component({
  selector: 'your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements AfterViewInit {
  @ViewChild('datePicker') datePickerRef: ElementRef;

  ngAfterViewInit() {
    // 监听pickadate的set事件
    $(this.datePickerRef.nativeElement).on('pickadate:set', (event) => {
      const selectedDate = new Date(event.detail.select);
      this.dateChanged(selectedDate);
    });
  }

  dateChanged(date: Date) {
    console.log('选中的日期:', date);
    // 这里写你的业务逻辑
  }
}

模板代码（添加模板引用变量）： #

<input #datePicker materialize="pickadate" type="text" class="datepicker" placeholder="Selecione a Data" [materializeParams]=datePickerParams>

为什么原生(change)事件不生效？ #

因为Materialize的datepicker会把原生的<input>元素隐藏，用自己生成的UI组件替代用户交互。用户选择日期时，实际是和Materialize的自定义DOM交互，原生input的change事件根本不会被触发，所以必须用组件自身提供的事件机制。

内容的提问来源于stack exchange，提问作者Murilo Góes de Almeida