Question

我有@uirouter的Angular应用程序。我想基于用户动态加载状态，例如如果用户在特定组中并单击路由到功能的特定菜单项，那么我想加载功能模块的替代实现。

州名将是相同的，所以我尝试使用uiRouter.stateRegistry.deregister和uiRouter.stateRegistry.register来处理这个问题。我在用户登录时进行相关调用，从登录到应用程序的转换（因为我需要知道用户凭据） - 因为我使用uiRouter.transitionService.onBefore。所以，代码大致是：

    uiRouter.transitionService.onBefore({}, transition => loginTransition(uiRouter, injector, transition));

    const isLogin = transition => transition.from().name === 'login' && transition.to().name === 'main';
    const isRefresh = transition => transition.from().url === '^';

    const loginTransition = (uiRouter: UIRouter, injector: Injector, transition: Transition) => {
      if(isLogin(transition) || isRefresh(transition)) {  
        if(injector.get('authService').getUser() === 'specificUser') {
          uiRouter.stateRegistry.deregister('feature-version-1');
          uiRouter.stateRegistry.register('feature-version-2');
        }
      }
    }

这在转换到应用程序然后导航到功能时工作正常。当用户不在功能页面上时，它也适用于页面刷新。问题是当用户在功能页面上刷新时它不起作用 - 然后加载feature-version-1而不是feature-version-2。但是，当导航到其他页面并返回功能页面时，feature-version-2会再次加载。

这种行为让我觉得stateRegistry的（de）注册功能在transitionService.onBefore中的简单场景下工作，通常使用（de）寄存器不适合在这里使用？或许我错过了某种状态刷新电话？

有人可以对这一个有所了解吗？什么时候最好使用（de）注册stateRegistry的功能？

Answer 1

想出来，所以我分享以防有人遇到类似的问题。 Trick是在传递给UIRouterModule.forChild（）的函数内调用stateRegistry，它将处理页面加载/刷新。

const register = (uiRouter: UIRouter, injector: Injector) => {
   if(injector.get('authService').getUser() === 'specificUser') {
      uiRouter.stateRegistry.deregister('feature-version-1');
      uiRouter.stateRegistry.register('feature-version-2');
    }
}

UIRouterModule.forChild({
    states: [/* states here */],
    config: (uiRouter: UIRouter, injector: Injector, module: StatesModule) => {
       register(uiRouter, injector);
       uiRouter.transitionService.onBefore({from:'login', to:'main'}, transition => register(uiRouter, injector));
    }
  })

angular-ui-router运行时状态

1 个答案: