CODEWITHSUNDEEP
angular-ui-routertransitioncancellation
Cokorda Raka
Cokorda Raka

Reputation: 4515

UI router | suspend a transition | onBefore

How do I cancel a transition in an onBefore? This snippet probably can illustrate my intention:

$transitions.onBefore({}, (trans) => {
    console.log("before a transition");
    console.log(trans);

    //I want to broadcast an event here
    //notifying inner components that it's about to switch state
    //The event will contain the trans
    //So I actually don't need to wait here, I just need to suspend the trans at this point.

    //The inner component will respond by emitting and event. 
    //That event will contain approval status, and the trans object. 
    //My code can simply check the approval status; If false,
    //it simply does nothing. Otherwise it will pick and resume the trans.
});

Thanks

Upvotes: 1

Views: 694

Answers (2)

geofrey
geofrey

Reputation: 466

A TransitionHookFn returns a HookResult. This can be in a form of a promise to defer transition until promise is resolved.

In this case, we can do the following:

$transitions.onBefore({}, $transitions => {
  return this.$timeout(() => {
    /*
     * Do something here. 
     * Once this is completed, transition can resume 
     * unless promise is rejected or resolves to a false value
     */
  }, 2000);
});

Reference: https://ui-router.github.io/ng1/docs/latest/modules/transition.html#hookresult

Upvotes: 0

Cokorda Raka
Cokorda Raka

Reputation: 4515

Figured it. This shows the idea.

First, have window.counter set to 0 in your boot.js / app.js..., and then in your controller's $onInit:

$transitions.onBefore({}, (trans) => {
  if (window.counter == 0) {
    this.$timeout(() => trans.run(), 2000);
    window.counter += 1;
    return false;
  }
});

You will notice at first your transition is cancelled..., and after 2 seconds it is re-run.

Upvotes: 1

Related Questions