UI Router angularjs Transitions onBefore 返回promise 未编译模板闪烁答案

【问题标题】：UI Router angularjs Transitions onBefore returning promise uncompiled template flickeringUI Router angularjs Transitions onBefore 返回promise 未编译模板闪烁
【发布时间】：2018-05-08 23:45:04
【问题描述】：

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

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

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

有什么办法解决这个问题吗？

【问题讨论】：

一旦过渡完成，你打算用响应替换组件 html 吗？
如果这对你有用，请检查这个stackblitz.com/edit/…
@Deep 感谢您的回复，但我无法向组件添加任何其他代码。想象一下，如果我有 1000 个组件。不，我不是，你看到的几乎是问题，我在转换时使用 promise，它使模板内容闪烁
@TomasLidžius 我也有这个问题。看起来像在 onBefore 中返回 Promise 会导致此问题。在没有进一步调查的情况下，将我的钩子从onBefore 更改为onStart 消除了闪烁问题。在你的例子中也是如此。希望这对其他人有帮助:)

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

【解决方案1】：

由于您使用的是 UI-Router，您可以尝试使用 resolve 在完成转换之前处理异步请求。

我用这个 resolve 状态属性替换了你的 $transitions.onBefore 钩子：

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

delayer 是一项应用延迟的服务，如您的示例。

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

对我来说没有闪烁，我们改变了。

【讨论】：