dhtmlx在angular2组件内

时间:2017-11-11 17:45:22

标签: javascript angular dhtmlx

我想在我的Angular2组件中使用dhtmlx onEmptyClick事件,我希望在其中调用我的组件的名为changewall()的函数,但是收到错误:

  

this.changeWall不是函数

如果我将changewall()放在scheduler.attachEvent之外,那么身体就可以了。为什么会这样?

不工作:

 scheduler.attachEvent("onEmptyClick", function (date, e ){
                        console.log('clickBefore');
                        this.changeWall(1511305200000);
                        console.log('clickAfter');
                    });

这项工作:

 this.changeWall(1511305200000);
     scheduler.attachEvent("onEmptyClick", function (date, e ){
                                console.log('clickBefore');
                                console.log('clickAfter');
                            });

整个代码:

import {Component, OnInit, AfterViewInit, HostListener} from '@angular/core';
import {WallService} from "../../services/wall.service";
declare var scheduler:any; //hide errors
@Component({
    moduleId: module.id,
    selector: 'big-calendar',
    templateUrl: 'calendar2.component.html',
    styleUrls: ['calendar2.component.scss']
})
export class Calendar2Component implements AfterViewInit {
    private wallInstance: any;
    events: any;
    constructor(private _wall: WallService) {

    }

    @HostListener('click', ['$event'])
    onClick(e) {
    // this.refreshCalendar();
    }

    refreshCalendar(){
        let date = new Date(scheduler.getState().date);
        let month = date.getMonth() + 1;
        let year = date.getFullYear();
        // scheduler.clearAll();

        scheduler.attachEvent("onEmptyClick", function (date, e ){
            console.log('clickBefore');
            this.changeWall(1511305200000);
            console.log('clickAfter');
        });

        this._wall.getCalendarEvents(month, year).subscribe((data: any)=>{
            console.log(data);
            let i = 0, events = [];

            while(i < data.events.length){
                events.push({
                    holder: "t", //userdata
                    room:   "1" ,
                    text: data.events[i].name,
                    start_date: data.events[i].start,
                    end_date: data.events[i].end +1
                });

                i++;
            }
            console.log(events);
            scheduler.init('scheduler_here',new Date(),"month");

            scheduler.parse(events,"json");
        });
    }


    ngAfterViewInit(): void {
        scheduler.config.touch = "force";
         this.refreshCalendar();
        // scheduler.parse([
        //     {id:1, text:"Meeting",   start_date:"04/11/2016 14:00",end_date:"14/12/2016 17:00"}
        // ],"json");
    }

        changeWall(timestamp){
        // let timestamp = new Date(date).getTime();
        // console.log(timestamp);
        this.wallInstance = this._wall.getInstance();
        this.wallInstance.timeChanger(timestamp);
    }
}

1 个答案:

答案 0 :(得分:3)

scheduler.attachEvent("onEmptyClick", function (date, e ){

应该是

scheduler.attachEvent("onEmptyClick", (date, e ) => {

并更改您使用function

的其他位置

请参阅https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions