Angular Call inside cordova success Callback doesn't work

Question

I'm running an Ionic App with Angular. I'm using the Diagnostic plug-in of Ionic, but one of the method I use doesn't work with the Diagnostic plugin, so I'm using cordova.plugins.diagnostic.

https://ionicframework.com/docs/native/diagnostic

https://github.com/dpa99c/cordova-diagnostic-plugin

My code is like this :

  onClickEnable() {

    cordova.plugins.diagnostic.requestRemoteNotificationsAuthorization({
      successCallback() {
        console.log('Successfully requested remote notifications authorization');
        // HERE I WOULD LIKE TO DO  A   THIS.ROUTER.NAVIGATE(['/page']);
      },
      errorCallback(err) {
        console.error('Error requesting remote notifications authorization: ' + err);
      },
      types: [
       // some value
      ],
      omitRegistration: false,
    });
  }

When I run the app, my pop-up shows, and I get the console.log But what I want is that after the user checked an option on the pop-up, it navigates to another page. So I'm trying to put a this.router.navigate(['/page]); inside the success Callback, but it doesn't work.

EDIT : Like this, doesn't work

onClickEnable() {
  cordova.plugins.diagnostic.requestRemoteNotificationsAuthorization({
    successCallback: () => {
      console.log('Successfully requested remote notifications authorization');
      this.router.navigate(['/page']);
    },
    errorCallback: (err) => {
      console.error('Error requesting remote notifications authorization: ' + err);
    
}

I know I'm using it the wrong way. Can someone explain me how to do this? I also tried to put a .then()... after the method, but it doesn't work.

And if I call the router.navigate after the end of the requestRemoteNotificationsAuthorization method, it navigates to the page, even if the user did not touch the pop-up.

score 0 · Answer 1 · answered Oct 15 '20 at 13:28

0

Seeing the documentation for requestRemoteNotificationsAuthorization(params) function, it appears you could send callbacks as inline arrow functions to refer to the this keyword in the scope of the enclosing class.

Try the following

onClickEnable() {
  cordova.plugins.diagnostic.requestRemoteNotificationsAuthorization({
    successCallback: () => {
      console.log('Successfully requested remote notifications authorization');
      this.router.navigate(['/page']);
    },
    errorCallback: (err) => {
      console.error('Error requesting remote notifications authorization: ' + err);
    },
    types: [
      // some value
    ],
    omitRegistration: false,
  });
}

To learn more about this keyword in Javascript and how to access it inside callback functions, you could refer here.

answered Oct 15 '20 at 13:28

ruth

29,535
4
30
57

Yes, that's what I also tried, and it doesn't work. I get the console.log message, but there is no redirection. I can't understand why – Shinichi Kudo Oct 15 '20 at 13:40
Ok, after defining a ```const that = this ```, and using ```that.router.navigate...```, it worked ! – Shinichi Kudo Oct 15 '20 at 13:48
That shouldn't be necessary. How or where is the `onClickEnable()` bound? – ruth Oct 15 '20 at 13:50
This method is inside my Component, ```export class ComponentName{...``` , I've got my constructors then ```constructor(private diagnostic: Diagnostic``` and my method ```onClickEnable``` – Shinichi Kudo Oct 15 '20 at 13:57
I still don't completely understand why doing my method solved my problem... – Shinichi Kudo Oct 15 '20 at 13:58
I don't mean in that way. Where is the `onClickEnable()` used? – ruth Oct 15 '20 at 14:02
Sorry, my english is not well. I'm just using a simple button in my HTML template, and this button has a ```click()``` method, like this ```(click)="onClickEnable()"``` – Shinichi Kudo Oct 15 '20 at 14:06
No issues :). Clearly the scope of `this` available in the function is lost inside the callback functions. I'm not sure exactly. – ruth Oct 15 '20 at 14:20
Yes, I think it's all about contexts. There was a topic about this but I didn't see it, here : https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback Defining a new variable makes the content "reachable" – Shinichi Kudo Oct 15 '20 at 15:57
Thank you very much for your help – Shinichi Kudo Oct 15 '20 at 15:58

score 0 · Accepted Answer · answered Oct 15 '20 at 13:54

Actually, I think that inside the cordova successcallback, I was in a different context than my Angular component, that's why my IDE wasn't giving me answers to my completion

After setting const that = this , and using that.router.navigate, it was recognized :

So my code looks like this now and it solved my problem :

onClickEnable() {
  const that = this;
  cordova.plugins.diagnostic.requestRemoteNotificationsAuthorization({
    successCallback: () => {
      console.log('Successfully requested remote notifications authorization');
      that.router.navigate(['/page']);
    },
    errorCallback: (err) => {
      console.error('Error requesting remote notifications authorization: ' + err);
    },
    types: [
      // some value
    ],
    omitRegistration: false,
  });
}

Angular Call inside cordova success Callback doesn't work

2 Answers2