Question

我喜欢Angular的路由器在将控制转移到控制器之前为我“解析”数据的能力。在等待路径的解析函数完成时，如果为解析函数运行ajax调用，我该如何向用户显示某些内容（微调器，“loading ...”等）？

以下是来自路由器的示例，其中显示了我的意思：

.when('/users/:userId/profile', {
  templateUrl: 'views/profile.html',
  controller: 'ProfileCtrl',
  resolve: {
    userProfile: ['$route', 'ProfileService', function ($route, ProfileService) {
      return ProfileService.loadProfile($route.current.params.userId);
    }]
  }
})

据我了解，“ProfileCtrl”在“userProfile”解析之前不会创建。这意味着我无法在等待解析函数完成时将代码放在那里运行。在我的情况下，“ProfileService.loadProfile”发出了HTTP请求，所以为了这个例子，让我们说它需要几秒钟才能返回。

在等待时向用户显示内容的推荐方法是什么？

Answer 1

您可以使用$routeChangeStart和$routeChangeSuccess设置一些布尔值，用于显示加载动画或视图中的任何内容：

angular.module('myApp').run(function($rootScope) {
    $rootScope.$on('$routeChangeStart', function() {
        $rootScope.isLoading = true;
    })
    $rootScope.$on('$routeChangeSuccess', function() {
        $rootScope.isLoading = false;
    })
})

在你的模板中你会有类似的东西：

<div class='loading' ng-show='isLoading'></div>

或者因为它链接到可能可用或不可用的模板，所以将类放在页面主体上：

<body ng-class='loading: isLoading'>

</body>

然后根据自己的喜好设计风格。

根据https://docs.angularjs.org/api/ngRoute/service/$route'一旦解决了所有依赖关系，就会触发$ routeChangeSuccess。'如果您想在ajax / resolve出现问题时告诉用户，还有routeChangeError。 ui-router类似stateChangeStart等。

解析函数解析时做什么？

1 个答案: