UI 路由器 |暂停过渡 |之前

Question

如何取消 onBefore 中的转换？这个片段可能可以说明我的意图：

$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.
});

谢谢

Answer 1

想通了。这表明了这个想法。

首先，在您的 boot.js / app.js... 中将 window.counter 设置为 0，然后在控制器的 $onInit:

中

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

您首先会注意到您的转换被取消了...，2 秒后它是 re-run。

Answer 2

一个TransitionHookFnreturns一个HookResult。这可以采用承诺推迟过渡直到承诺得到解决的形式。

对于这种情况，我们可以这样做：

$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);
});

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

UI 路由器 |暂停过渡 |之前

UI router | suspend a transition | onBefore

transitions

cancellation

angular-ui-router