UI路由器angularjs转换onBefore返回承诺未编译的模板闪烁

时间:2018-04-25 14:00:29

标签: javascript angularjs promise angular-ui-router transitions

寻找全局修复以防止未编译的模板闪烁

https://stackblitz.com/edit/angularjs-ui-router-transition-flicker-8bokfp?file=app.js

在上面的示例中,通过导航A和B组件,您可以看到转换发生时红色文本闪烁。

任何想法如何解决这个问题?

1 个答案:

答案 0 :(得分:0)

由于您使用的是 UI-Router ,因此您可以尝试使用解决来处理异步请求,然后再完成转换。

我将 $ transitions.onBefore 挂钩替换为此 resolve 状态属性:

$stateProvider
    .state({
        name: 'a',
        url: '/a',
        component: 'componentA',
        resolve: { delay: (delayer) => delayer.apply() }
    });

其中延迟是一种应用延迟的服务。

angular.module('app')
  .service('delayer', ($http) => {
    return {
        apply: () => {
          return new Promise((resolve, reject) => {
            $http.get('https://reqres.in/api/users?delay=0.5')
              .then(() => {
                resolve();
              });
          });
        }
    }
  });

对我来说,没有闪烁,我们就会改变。