Access typescript methods from javascript in ionic2

Question

I'm tyring to call a typescript method from javascript in ionic2. Let's consider a ionic2 page generated by "ionic g page MyPage" where I have created a method myNewMethod".

Is there any way to call myNewMethod" from a javascript function which is part of a cordova plugin? I've noticed that in main.js, as transpiled in javascripte, there is a variable MyPage and myNewMethod is defined as prototype. However If I call MyPage.myNewMethod doesn't seem to work.

I have further noticed the following part of code:

/* 312 */
(function(module, __webpack_exports__, __webpack_require__) {

"use strict";
var __WEBPACK_IMPORTED_MODULE_0__angular_core__ = __webpack_require__(0);
var __WEBPACK_IMPORTED_MODULE_1_ionic_angular__ = __webpack_require__(136);
__webpack_require__.d(__webpack_exports__, "a", function() { return MyPage; });
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};


var MyPage = (function () {
    function MyPage(navCtrl, navParams) {
        this.navCtrl = navCtrl;
        this.navParams = navParams;
    }
    MyPage.prototype.ionViewDidLoad = function () {
        console.log('ionViewDidLoad MyPage');
    };
    MyPage.prototype.myNewMethod = function () {
        //do stuff
    };
    MyPage = __decorate([
        __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["B"])({
            selector: 'page-add-item',template:'Some Template'
        }),
        __metadata('design:paramtypes', [__WEBPACK_IMPORTED_MODULE_1_ionic_angular__["d"], __WEBPACK_IMPORTED_MODULE_1_ionic_angular__["e"]])
    ], MyPage);
    return MyPage;
}());


}),

It seems that the scope of MyPage is not available directly and it's being returned through webpack_requare

Any help would be appreciated.

Thanks

Symeon Mattes · Accepted Answer · 2017-04-13 09:51:33Z

3

Probably it's not the best way since I make MyPage public, but at least it works. What I did is I assigned MyPage to window variable, i.e. during ionViewDidLoad I wrote:

eval('window.MyPage = this');

MyMethod is considered a prototype and as a consequence I can call it from javascript code through:

window.MyPage.MyMethod();

answered Apr 13, 2017 at 9:51

Symeon Mattes

1,2582 gold badges20 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Symeon Mattes · Accepted Answer · 2017-04-18 12:48:13Z

0

Another way which is more correct is to override the function that exists in the cordova plugin. If we consider

MyCordovaPlugin.prototype.aMethodToOveride=function(){}

Then form MyPage in the constructor

var MyPage = this; 
cordova.plugins.MyCordovaPlugin.aMethodToOveride=function(){ 
    MyPage.MyMethod();  
}

answered Apr 18, 2017 at 12:48

Symeon Mattes

1,2582 gold badges20 silver badges41 bronze badges

Collectives™ on Stack Overflow

Access typescript methods from javascript in ionic2

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related