Cordova（Ionic2）自定义插件：使用cordova.exec（）successHandler管理Angular2新Promise（）

Question

I am building a Cordova plugin to use with Ionic2 . I am kind of experienced with Cordova (and custom plugins) but rather new to Ionic2 (and hence also new at Angular2, TypeScript ).

(What I am asking now, I used to manage it with Jquery Deferred)

In my "app.component.ts" file I have:

import...

declare var MyPlugin: any;

@Component({
  templateUrl: 'app.html'
})

export class MyApp {
  ...
  initializeApp() {
    this.platform.ready().then(() => {
      StatusBar.styleDefault();
      MyPlugin.action();
    });
  }
  ...
}

I won't detail the "plugin.xml" file for my plugin. This works fine.

The "MyPlugin.js" goes like that:

var PLUGIN_NAME = "MyPlugin";

var MyPlugin =function(){};

MyPlugin.action(){
    cordova.exec(
        successResultHandler,
        errorResultHandler,
        PLUGIN_NAME,
        action,
        []
    );
} 
exports.module=MyPlugin;

In my Java Class linked to "MyPlugin.js" file I have something like:

public class MyPlugin extends CordovaPlugin {

    @Override
    public boolean execute(String action, final JSONArray args, final CallbackContext callbackContext) throws JSONException {
          //something async
          callbackContext.success()
    }
}

When the Java class triggers the callbackContext.success , the JS cordova.exec will launch the function successResultHandler . I was wondering how to use the Angular2 Promise to catch the async event???

I started to write some code but it doesn't make sense the order I should use.

I was thinking of doing something like that in "MyPlugin.js":

MyPlugin.action(){
   return new Promise(function(resolve,reject){
    cordova.exec(
        successResultHandler,
        errorResultHandler,
        PLUGIN_NAME,
        action,
        []
    );
    });
} 

But of course it doesn't make any sense, how do you catch the result of the function successResultHandler in resolve that way.

Has anyone an idea?

Answer 1

The resolve and reject parameters that the Promise constructor passes into the callback function are themselves functions, so you should be able to do something like this:

MyPlugin.action(){
   return new Promise((resolve,reject) => {
        cordova.exec(
            resolve,
            reject,
            PLUGIN_NAME,
            action,
            []
        );
    });
};

Then invoke it like this:

MyPlugin.action().then(() => {
    console.log("Success");
},(err) => {
    console.error(err);
});