首页 > 解决方案 > 将值从 Jquery 库函数传递到 Angular 9 组件函数

问题描述

我在 Angular 9 项目中使用了 Jquery 日历插件。单击每个日期时,Jquery 函数会触发并返回所选日期。我想将该日期传递给 Angular9 组件函数,以便我可以在模板中操作和显示它。但是当我调用 angularComponentFunction(date) 时,它正在 Jquery 中寻找 angularComponentFunction 并且不返回函数错误。

谁能指导我如何将值从 Jquery 库函数传递到 Angular 组件函数?

import { Component, OnInit } from '@angular/core';
import '../../shared/calendar/calendar.js';

@Component({
  selector: 'app-angular',
  templateUrl: './angular.component.html',
  styleUrls: ['./angular.component.scss']
})

export class AngularComponent implements OnInit{
  public startDate: any;
  public endDate: any;
  
  showDateInTemplate(date){
   console.log(date);
  }

  getCalender() {
  
     var dateConfig = {
       date: new Date(),
       onClickDate: this.selectDate  //this.selectDate is Jquery function
     };

     $('#monthly_calendar').calendar(dateConfig);
  }
  
  selectDate(date) {  //Jquery function Implementation
   
      this.showDateInTemplate(date); // This is Angular component function. But 'this' is referring to Jquery instead of Angular component.
  }

  ngOnInit(): void {
    this.getCalender();
  }
}

标签: javascriptjqueryangularangular9

解决方案


推荐阅读