无法在jquery中调用角度函数

Question

我正在使用角度完整日历插件，并在事件渲染功能中添加了上下文菜单。 上下文菜单正在工作，但我想在单击上下文菜单项时调用角度函数。

我使用了以下代码，但无法在 jquery 内调用“cancelRsvClick”。

       cancelRsvClick() {
        console.log('cancel---')
      }
      
      eventRender(event, element) {
        
          const contextmenu =  `<div  class="contextMenu ngx-contextmenu dropdown clearfix">
          <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"
          style="display:block;position:static;margin-bottom:5px;">
              <li data-action = "CancelReservation"  ><a tabindex="-1" role="button"   >Cancel Reservation</a></li>
              <li data-action = "Billing" > <a tabindex="-1"  >Billing</a></li>
          </ul>
      </div>`;
      
        $(element).contextmenu((e) => {
          
          $('.contextMenu').remove();
          const $contextMenu = $(contextmenu).appendTo('body');
          $($contextMenu).css('top', e.pageY);
          $($contextMenu).css('left', e.pageX);
          $($contextMenu).css('position', 'absolute');
          $($contextMenu).css('overflow', 'hidden');
          $($contextMenu).css('z-index', 10000);
      
         
            $($contextMenu).on('click', 'li', (ele) => {
              console.log(ele);
              this.cancelRsvClick();
            });
         
          
        }); 

}

html代码

<app-clovatel-rm-sheduler
[header]="header"           
[footer]="footer"
[views]="views"
[defaultView]="defaultView"
[defaultDate]="defaultDate"
[contentHeight]="contentHeight"
[slotWidth]="slotWidth"
[slotDuration]="slotDuration"
[slotLabelFormat]="slotLabelFormat" 
[resourceAreaWidth]="resourceAreaWidth"
[resourceColumns]="resourceColumns"
[resources]="resources"
[restrictedResources]="restrictedResources"
[resourceOrder]="resourceOrder"
[allDayDefault]="allDayDefault"
[events]="events"
[eventOverlap]="eventOverlap"
[eventConstraint]="eventConstraint"
[selectConstraint]="selectConstraint"
(onSelect)="onDaySelect($event, this)"
(onEventClick)="onEventClick($event)"
(onDayRightClick)="onDayRightClick($event)"
(onEventMouseover)="onEventMouseover($event)"
[eventRender]="eventRender"
></app-clovatel-rm-sheduler>

这是我实现fullcallendar的方式。

@Input() resources: any[];
  
  @Input() events: any[];
  
  @Input() eventRender: Function;

  @Input() dayRender: Function;

  @Input() options: any;

schedule: any;

 constructor(public el: ElementRef, differs: IterableDiffers) {
    this.differ = differs.find([]).create(null);
    this.initialized = false;
  }

ngOnInit() {
    this.config = {
      resources: this.resources,
      resourceColumns: this.resourceColumns,
      resourceAreaWidth: this.resourceAreaWidth,
      resourceLabelText: this.resourceLabelText,    
      views: this.views,
      theme: true,
      header: this.header,
      footer: this.footer,
      selectable: this.selectable,
      droppable: this.droppable,     
      eventRender: this.eventRender,
      dayRender: this.dayRender,
      }
    }

 ngAfterViewChecked() {
    
    if (!this.initialized && this.el.nativeElement.offsetParent) {
      this.initialize();
    }
  }
  
 
  
  initialize() {
    this.schedule = jQuery(this.el.nativeElement.children[0]);
    this.schedule.fullCalendar(this.config);
    this.schedule.fullCalendar('addEventSource', this.events);
    this.initialized = true;
  }
  
    ngDoCheck() {
  
        const changes = this.differ.diff(this.events);

        if (this.schedule && changes) {
          this.schedule.fullCalendar('removeEventSources');
          this.schedule.fullCalendar('addEventSource', this.events);
        }
    }

  ngOnDestroy() {
    
    jQuery(this.el.nativeElement.children[0]).fullCalendar('destroy');
    this.initialized = false;
    this.schedule = null;
  }

Answer 1

如果您想在 jquery onClick 事件处理程序中使用角度类引用，请尝试使用 bind

$($contextMenu).on('click', 'li', (ele) => {
    console.log(ele);
    this.cancelRsvClick();
}).bind(this);

// or 

const $this = this;
$($contextMenu).on('click', 'li', (ele) => {
    console.log(ele);
    $this.cancelRsvClick();
}).bind(this);

// or 

eventRender(event, element) {
    const $this = this;
    const contextmenu =  `
        <div  class="contextMenu ngx-contextmenu dropdown clearfix">
            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"
            style="display:block;position:static;margin-bottom:5px;">
                <li data-action = "CancelReservation"  ><a tabindex="-1" role="button"   >Cancel Reservation</a></li>
                <li data-action = "Billing" > <a tabindex="-1"  >Billing</a></li>
            </ul>
        </div>
    `;
$(element).contextmenu((e) => {
    $('.contextMenu').remove();
    const $contextMenu = $(contextmenu).appendTo('body');
    $($contextMenu).css('top', e.pageY);
    $($contextMenu).css('left', e.pageX);
    $($contextMenu).css('position', 'absolute');
    $($contextMenu).css('overflow', 'hidden');
    $($contextMenu).css('z-index', 10000);
    $($contextMenu).on('click', 'li', (ele) => {
        console.log(ele);
        // Chage this to $this 
        $this.cancelRsvClick();
    });
});