Javascript $ionicLoading与Angular UI路由器解析

我试着用Angular。其思想是，当请求新路由/状态时，加载模式在解析数据时出现，然后在解析完成并实例化新状态时消失

路由器

.state('tab.locations', {
  url: '/locations',
  cache: false,
  views: {
    'locations-tab': {
      templateUrl: 'js/locations/tab-locations.html',
      controller: 'LocationsCtrl as vm'
    }
  },
  resolve: {
    locationsResource: 'Locations',
    locations: function(locationsResource) {
      return locationsResource.all();
    }
  }
})

$httpProvider.interceptors.push(function($rootScope) {
  return {
    request: function(config) {
      $rootScope.$broadcast('loading:show');
      return config
    },
    response: function(response) {
      $rootScope.$broadcast('loading:hide');
      return response
    }
  }
})

如果没有解决方案，建议使用

$httpProvider.interceptors

广播事件以显示和隐藏加载屏幕。像这样：

$ionicConfigProvider

.state('tab.locations', {
  url: '/locations',
  cache: false,
  views: {
    'locations-tab': {
      templateUrl: 'js/locations/tab-locations.html',
      controller: 'LocationsCtrl as vm'
    }
  },
  resolve: {
    locationsResource: 'Locations',
    locations: function(locationsResource) {
      return locationsResource.all();
    }
  }
})

$httpProvider.interceptors.push(function($rootScope) {
  return {
    request: function(config) {
      $rootScope.$broadcast('loading:show');
      return config
    },
    response: function(response) {
      $rootScope.$broadcast('loading:hide');
      return response
    }
  }
})

运行块

$rootScope.$on('loading:show', function() {
  $ionicLoading.show({template: '<ion-spinner></ion-spinner>'})
});

$rootScope.$on('loading:hide', function() {
  $ionicLoading.hide()
});

$rootScope.$on（'loading:show'，function（）{
$ionicLoading.show（{模板：'}）
});
$rootScope.$on（'loading:hide'，function（））{
$ionicLoading.hide（）
});

这在不使用resolves时非常有效。但当解析工作时，加载屏幕不再显示

如果存在解决方案但也不起作用，我已尝试在

$stateChangeStart

上播放

加载：show

---

是否有其他拦截器或状态更改事件我应该广播

加载：show

和

加载：hide

以使

$ionicLoading

与解析一起工作

就连我也有同样的问题。它适用于简单的HTTP请求，但当您开始使用状态解析时，它不会立即生效。
您可以使用一个简单的模块，通过拦截所有$http请求，该模块工作得非常好。

这会引发一些事件，您可以在$rootScope.$on上使用这些事件

cfpLoadingBar:started在第一个XHR请求时触发一次。如果在触发cfpLoadingBar:completed后发出另一个请求，将再次触发

cfpLoadingBar:completed在所有XHR请求返回时触发一次（成功或失败）

---

对于仍在与此问题作斗争的人：）

我最近遇到了此问题，这在运行块中对我有效：

$rootScope.$on('loading:show', function () {
    $ionicLoading.show({
        template:'Please wait..'
    })
});

$rootScope.$on('loading:hide', function () {
    $ionicLoading.hide();
});

$rootScope.$on('$stateChangeStart', function () {
    console.log('please wait...');
    $rootScope.$broadcast('loading:show');
});

$rootScope.$on('$stateChangeSuccess', function () {
    console.log('done');
    $rootScope.$broadcast('loading:hide');
});

---

我在爱奥尼亚论坛找到了它，这就是我在开发的应用程序中解决它的方法：

export var ngModule = angular.module('myApp', ['ionic']);

ngModule.run(($ionicPlatform: ionic.platform.IonicPlatformService, $state: ng.ui.IStateService, $rootScope: ng.IRootScopeService, $ionicLoading: ionic.loading.IonicLoadingService) => {
    $ionicPlatform.ready(function () {

        if (window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
            cordova.plugins.Keyboard.disableScroll(true);
        }
        if (window.StatusBar) {
            StatusBar.styleDefault();
        }
        $rootScope.$on("$stateChangeStart", (event, toState, toParams, fromState, fromParams) => {
            $ionicLoading.show({
                delay: 200,
                template: "Loading..."
            });
        });

        $rootScope.$on("$stateChangeSuccess", (event, toState: ng.ui.IState, toParams, fromState, fromParams) => {
            $ionicLoading.hide();
        });

        $rootScope.$on("$stateChangeError", (event, toState, toParams, fromState, fromParams, error) => {
            $ionicLoading.hide();
            console.error("Error loading the page: %o", error);
        });
        $state.go("login");
    });
});

它是用TypeScript编写的，但我相信将其转换为JavaScript不会有问题

---

实际上，您不需要http拦截器，也不需要广播角度事件。

您解决过这个问题吗？没有，我们最终没有使用resolves.wow。我也有同样的问题。我在寻找解决办法。如果没有加载器，我不明白有解析的意义。