UI Router angularjs Переходы перед возвратом обещания некомпилированного мерцания шаблона

Question

В поисках глобального исправления для предотвращения мерцания некомпилированного шаблона

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

В этом примере выше при навигации по компонентам A и B вы можете увидеть мерцание красного текста во время перехода.

Есть идеи, как решить эту проблему?

Answer 1

Так как вы используете UI-Router , вы можете попробовать с resol обработать асинхронный запрос до завершения перехода.

Я заменил ваши $ переходы.onBefore ловушка с этим resol свойством состояния:

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

Нет мерцания для меня, мы это изменим.