Угловая функция обратного вызова из события jquery

Question

Я использую Angular5 и пытаюсь получить событие dayClick() плагина jquery fullcalendar.io для обратного вызова углового компонента, чтобы я мог открыть диалоговое окно углового компонента, заполненное данными календаря.

Для настройки примера сделайте это в консоли:

ng new pjt
cd pjt
npm install jquery fullcalendar --save

Обновление до.angular-cli.json, чтобы включить

[styles]
"../node_modules/fullcalendar/dist/fullcalendar.min.css"

[scripts]
"../node_modules/jquery/dist/jquery.js",
"../node_modules/moment/min/moment.min.js",
"../node_modules/fullcalendar/dist/fullcalendar.min.js"

Добавить в main.ts

import * as jQuery from "jquery";
(window as any).$ = (window as any).jQuery = jQuery;

обновить app.component.html

<div id='calendar'></div>
<div id="test" (click)="Clicked()" hidden="true"></div>

Добавить в app.component.ts

import 'fullcalendar';
declare let $:any;

@Component({...})
export class AppComponent {
...

  ngOnInit(){
    $('#calendar').fullCalendar({

      dayClick: function(date, jsEvent, view) {

          //alert('Clicked on: ' + date.format());
          $(this).css('background-color', 'red');

  ***** WANT A BETTER WAY TO CALL NG CLICKED() FUNCTION HERE TO REPLACE THE FOLLOWING 2 LINES *****
          document.getElementById("test").innerText = date.format();
          document.getElementById("test").click();
      }
    });

    $('#calendar').fullCalendar('changeView', 'agendaDay');
  }

  Clicked() {
    alert("Alert from ng func");
  }
}

затем ng server и щелкните часть календарного расписания дня.

Обратите внимание, что это угол 5, поэтому он не выглядит как ng-controller или видимость из ng v1 кажется правильным способом сделать это. Я ищу более чистый способ вызова функции без необходимости иметь "тестовый" div.

Answer 1

Исходя из того, что вы хотите удалить <div id="test">Замените ваш вызов функции на вызов функции стрелки:

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

Измените событие, на которое вы нажали, чтобы принять параметры, переданные из полного события календаря:

Clicked(date, jsEvent, view) {
// do something with new inputs..
alert("Alert from ng func");
}

Использование синтаксиса функции стрелки позволяет this быть привязанным к вашему AppComponent. Таким образом, вы можете напрямую вызывать любую функцию, определенную вами в компоненте.

Answer 2

Вот способ, которым вы можете сделать это. Будет лучше использовать функцию стрелки.

HTML код

<div id="test" #clicktag (click)="Clicked()" hidden="true"></div>

Код JS

import { ViewChild, Component, ElementRef } from '@angular/core';

@ViewChild('clicktag') clicktag:ElementRef;

ngOnInit(){
  $('#calendar').fullCalendar({
    dayClick:(date, jsEvent, view) => {
      $(jsEvent.currentTarget).css('background-color', 'red');
      $(this.clicktag.nativeElement).text(date.format());
      $(this.clicktag.nativeElement).trigger( "click" );
    }
  });
  $('#calendar').fullCalendar('changeView', 'agendaDay');
}

Вы все еще можете взглянуть на этот ответ /questions/32683063/angular2-ruchnoe-srabatyivanie-sobyitiya-klika-na-konkretnom-elemente/32683072#32683072. Здесь они использовали только угловой, чтобы вызвать щелчок

import { ViewChild, Component, ElementRef, Renderer } from '@angular/core';

@ViewChild('clicktag') clicktag:ElementRef;

constructor(private renderer:Renderer) {}

ngOnInit(){
  let eventClick = new MouseEvent('click', {bubbles: true});
  $('#calendar').fullCalendar({
   dayClick:(date, jsEvent, view) => {
    $(jsEvent.currentTarget).css('background-color', 'red');
    $(this.clicktag.nativeElement).text(date.format());
    this.renderer.invokeElementMethod(this.clicktag.nativeElement, 'dispatchEvent', [eventClick]);
  }
 });
 $('#calendar').fullCalendar('changeView', 'agendaDay');
}