如何从html中调用angular 2.0 beta函数，它是从jQuery绑定的

Question

我将额外的html绑定到fullcalendar最新版本2.5.0并想要一个将调用angular 2.0函数的点击事件。

＆＃13;

＆＃13;

import {Component, ElementRef, Inject, OnInit} from 'angular2/core'; import {ROUTER_DIRECTIVES} from 'angular2/router'

import 'jquery' import 'fullcalendar';

declare var jQuery: any;

@Component({
selector: 'ite-calendar',
templateUrl: 'views/calendar.html',
directives: [ROUTER_DIRECTIVES]

})

export class CalendarComponent implements OnInit {
elementRef: ElementRef;

constructor( @Inject(ElementRef) elementRef: ElementRef) {
    this.elementRef = elementRef;
}
  ngOnInit() {
    var el: HTMLElement = this.elementRef.nativeElement;
   var calendar = jQuery(el).find(".calendar");
    calendar.fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        defaultView: 'agendaWeek',
        defaultDate: '2015-12-06',
        editable: true,
        eventLimit: true, // allow "more" link when too many events
        events: this.getAllEvents(),
        eventAfterRender: function (event, element, view) {
            var content = event.description;
            if (content != undefined) {
                var html = "";
                html += `<div class="contentDiv">` + content + `</div>`;
                element.append(html);
                el.querySelector(".contentDiv").addEventListener("click", function () {
                        console.log("Clicked");
                });

            }
        }
    });
}

getAllEvents() {
    return [
        {
            title: 'Half Day Event',
            start: '2015-12-06T10:30:00',
            allDay: false,
            className: 'defaultCal',
            editable: false,
            description: 'This is a cool event'
        },
        {
            title: 'All Day Event',
            start: '2015-12-02',
            allDay: true
        },
        {
            title: 'Long Event',
            start: '2015-12-07',
            end: '2015-12-10'
        },
        {
            id: 999,
            title: 'Repeating Event',
            start: '2015-12-09T16:00:00'
        },
        {
            id: 999,
            title: 'Repeating Event',
            start: '2015-12-16T16:00:00'
        },
        {
            title: 'Conference',
            start: '2015-12-10',
            end: '2015-12-12'
        },
        {
            title: 'Meeting',
            start: '2015-12-12T10:30:00',
            end: '2015-12-12T12:30:00'
        },
        {
            title: 'Lunch',
            start: '2015-12-12T12:00:00'
        },
        {
            title: 'Meeting',
            start: '2015-12-12T14:30:00'
        },
        {
            title: 'Happy Hour',
            start: '2015-12-12T17:30:00'
        },
        {
            title: 'Dinner',
            start: '2015-12-12T20:00:00'
        },
        {
            title: 'Birthday Party',
            start: '2015-12-13T07:00:00'
        },
        {
            title: 'Click for Google',
            url: 'http://google.com/',
            start: '2015-12-28'
        }
    ]
} }

＆＃13;

＆＃13;

＆＃13;

Answer 1

{{1}}