Question

我正在试图弄清楚如何让jquery函数调用封闭的Angular 2 Component中的方法。

我正在使用Angular 2项目中的https://github.com/mdehoog/Semantic-UI-Calendar组件。我已经为jQuery声明了一个const类型的const，然后在我的ngOnInit我这样做：

   jQuery('#monthYearPicker').calendar({
        type: 'month',
        maxDate: new Date(),

        // minDate and maxDate take new Date() objects

        onChange: function(date, text, mode) {
            console.log("Date is " + date);
            console.log("Text is " + text);
        }
    });

我正在按预期看到控制台日志。我现在没有得到的是如何回调我的组件，以便我可以做到'正常'的东西？例如，我现在想调用我的方法来查询web服务并传入所选的日期。

Answer 1

在this.sampleFun()事件功能中使用onChange。但首先，你必须以这种方式修改你的匿名函数定义，以保持current context：

onChange: (date, text, mode) => {
    // console.log("Date is " + date);
    // console.log("Text is " + text);
    this.sampleFun();
}

Answer 2

注意：如果您在 Jquery 代码中处理 angular2/typescript ，请确保使用jquery at ngViewAfterInit() 生命挂钩代替 ngOnInit()

fetcheData:any;

ngViewAfterInit(){

 jQuery('#monthYearPicker').calendar({
        type: 'month',
        maxDate: new Date(),

        // minDate and maxDate take new Date() objects

        onChange: (date, text, mode) => {             //used arrow function ()=>
            console.log("Date is " + date);
            console.log("Text is " + text);

            //call your webapi here on onChange event
            this.calltoWebapi();                      //calling a function
        }
    });
}

calltoWebapi(){
     //actual http call and get some response
     //this.fetchedData=response;
}

jquery调用角度2分量方法

2 个答案: