Question

在UI-Router中，您可以在状态更改之前解析数据。这显然有点阻止变化，直到决定结束。

我的问题

有没有办法用骨架模板填充目标视图，以指示状态更改正在进行？

类似的东西：

 $stateProvider
  .state("management", {
    url: "/management",
    views: {
      "management-view": {
        component: "njCloudManagement"
      }
    },
    preview: {    // <-- something like this?
      "management-view": {
        template: "skeleton.html"    
      }
    }
    params: {
      id: {
        type: "string",
        value: ""
      }
    },
    resolve: {
      mightyResolve: () => {}
    }
  });

Answer 1

一个选项是创建一个中间骨架控制器和视图，然后显示视图。

然后加载您的解析数据。

最后使用数据移动到适当的视图。

Answer 2

在主控制器中，监听状态更改事件并根据这些事件显示微调器。这在this答案中得到了很好的证明。

$scope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
    if (toState.resolve) {
        $scope.showSpinner();
    }
});
$scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
    if (toState.resolve) {
        $scope.hideSpinner();
    }
});
$scope.hideSpinner = function(){
  // your spinner showing code here
}

预先解决渲染骨架的行为？

2 个答案: