wie eine Typoskript-Funktion innerhalb einer JQuery-Funktion aufrufen?

Question

Ich weiß nicht, ob es möglich ist, ein Typoskript in einer jquery-Funktion aufzurufen. Wenn es möglich ist, was ist die richtige Methode dafür?

dies mein component.ts

getCalendar(){ 
    calendarOptions:Object = { 
    height: 'parent', 
    fixedWeekCount : false, 
    defaultDate: '2017-03-01', 
    editable: true, 
    eventLimit: true, // allow "more" link when too many 

dayclick Funktion

dayClick: function(date, jsEvent, view) { 
     this.addModal(); **this function is not working** 

     //console.log(jsEvent); 
     // alert('Clicked on: ' + date.format()); 
     // alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY); 
     // alert('Current view: ' + view.name); 
     }, 

    success: function(doc) { 
     var events = []; 
     $(doc).find('event').each(function() { 
      events.push({ 
       title: $(this).attr('title'), 
       start: $(this).attr('start') // will be parsed 
      }); 
     }); 
    }, 

    eventAllow: function(dropLocation, draggedEvent) { 
     if (draggedEvent.id === '999') { 
     return dropLocation.isAfter('2017-03-22'); // a boolean 
     } 
     else { 
     return true; 
     } 
    } 
    }; 

    ngOnInit() { 
     this.getTotalEmployee(); 
     this.getComputeAbsent(); 
     this.getTotalAttendance(); 
     // this.showEvent(); 
     this.calendarOptions['events'] = this.events; 

    } 



    public catchError(error: any) { 
     let response_body = error._body; 
      let response_status = error.status; 

      if(response_status == 500){ 
      this.error_title = 'Error 500'; 
      this.error_message = 'The given data failed to pass validation.'; 
      } else if(response_status == 200) { 
      this.error_title = ''; 
      this.error_message = ''; 
      } 

     } 

    showEvent(){ 
     this._event_service.getEventList() 
     .subscribe(
      data => { 
      this.events = Array.from(data); 
      this.calendarOptions['events'] = this.events; 
      console.log(this.calendarOptions['events']); 

      }, 
      err => this.catchError(err) 

    ); 
     } 


    getEvents() { 
     this._event_service.getEvents().subscribe(
     data => { 
      this.eventsList = Array.from(data); 
      this.calendarOptions['events'] = this.eventsList; 

     }, 
     err =>{} 
    ); 
    } 

dies ist meine modale Funktion, die oben in Jquery-Funktion aufzurufen im Versuch,

addModal() { 
    let disposable = this.modalService.addDialog(EventComponent, { 
      title:'Add Event' 
      }).subscribe((isConfirmed)=>{ 
     }); 
    } 
    getTotalAttendance() { 
     let pre; 
     this._attend_service.getTotalPresent().subscribe(
     data => { 
      pre = Array.from(data); 
      this.present = pre[0].total_present; 

     }, 
     err =>{} 
    ); 
    } 

    getTotalEmployee() { 
     let totalEmp; 
     let filter = "Active"; 
     this._attend_service.getTotalEmp(filter).subscribe(
     data => { 
      totalEmp = data; // fetced record 
      this.total_emp = totalEmp[0].total_employee; 

     }, 
     err =>{} 
    ); 
    } 

    getComputeAbsent(){ 
     let employee = parseInt(this.employee); 
     let attendance = parseInt(this.attendance); 

      this.totalAbsent = employee - attendance; 


     } 

Answer 1

Wenn Sie nicht brauchen, die beiliegende this

Sie auf den Pfeil-Funktion verwenden können:

dayClick: (date, jsEvent, view)=> { 
      this.addModal(); 
      } 

Oder Sie können die äußere this in einer Variablen speichern und später verwenden

var self = this; // store here 
dayClick: function(date, jsEvent, view) { 
      self.addModal(); // use here 
      } 

Edit:

getCalendar(){ 
    var self = this; // ****** 
    calendarOptions:Object = { 
    height: 'parent', 
    fixedWeekCount : false, 
    defaultDate: '2017-03-01', 
    editable: true, 
    eventLimit: true, // allow "more" link when too many 
    dayClick: function(date, jsEvent, view) { 
     self.addModal(); // ********* 
     }, 

    success: function(doc) { 
     var events = []; 
     $(doc).find('event').each(function() { 
      events.push({ 
       title: $(this).attr('title'), 
       start: $(this).attr('start') // will be parsed 
      }); 
     }); 
    }, 

    eventAllow: function(dropLocation, draggedEvent) { 
     if (draggedEvent.id === '999') { 
     return dropLocation.isAfter('2017-03-22'); // a boolean 
     } 
     else { 
     return true; 
     } 
    } 
    };