【问题标题】:Angular Resolve on Application Reload应用程序重新加载时的 Angular Resolve
【发布时间】:2026-02-12 03:10:01
【问题描述】:

如何在页面重新加载时延迟我的应用程序控制器的初始化(路由器中的“解析”属性)?或者更好的问题,我如何延迟视图直到我的控制器检索到用户对象,特别是在页面重新加载时?

我目前在我的 ApplicationCtrl 顶部有这个

if (localStorage.getItem('token') && localStorage.getItem('token') != 'null')
{
    sessionStorage.setItem('token', localStorage.getItem('token'))
}
if (sessionStorage.getItem('token') && sessionStorage.getItem('token') != 'null')
{
    UserSvc.getUser()
    .then(function (response) 
    {
        loadUser(response.data)
    })
    .then(function (error)
    {
        if (error) $scope.logout()
    })
}

这会检查身份验证令牌,然后使用该令牌从数据库中获取用户对象。

但问题是页面出现后用户数据卡顿,因此在用户的显示名称在几毫秒后突然出现之前我们的导航栏是空的。

如何在初始用户请求完成之前延迟显示此视图?

【问题讨论】:

    标签: javascript angularjs promise angular-promise


    【解决方案1】:

    想通了。我刚刚创建了一个* $scope boolean $scope.initResolved ,它通过完成第一个用户检查(无论它是否检索用户)呈现为真,并将标题和 ng-view 设置为 ng-if="initResolved"

    $scope.initResolved = false
    
        if (localStorage.getItem('token') && localStorage.getItem('token') != 'null')
        {
            sessionStorage.setItem('token', localStorage.getItem('token'))
        }
        if (sessionStorage.getItem('token') && sessionStorage.getItem('token') != 'null')
        {
            UserSvc.getUser()
            .then(function (response) 
            {
                loadUser(response.data)
                $scope.initResolved = true
            })
            .then(function (error)
            {
                if (error) $scope.logout()
                $scope.initResolved = true
            })
        }
        else if ($location.url() == "")
        {
            $location.path('/welcome')
            $scope.initResolved = true
        }
        else $scope.initResolved = true
    

    【讨论】:

      【解决方案2】:

      这应该放在resolve of you state 中,customService 将返回包含 promise 对象的 UserStatus。然后,您可以将此服务添加到您的控制器,controller 将等待此依赖得到解决。

      resolve: function() {
          'UserStatus': function(UserSvc) {
              if (localStorage.getItem('token') && localStorage.getItem('token') != 'null') {
                  sessionStorage.setItem('token', localStorage.getItem('token'))
              }
              if (sessionStorage.getItem('token') && sessionStorage.getItem('token') != 'null') {
                  return UserSvc.getUser();
              }
          }
      }
      

      控制器

      app.controller('myCtrl', function(UserStatus, $scope){
         UserStatus.then(function(data){
            //you will get response here
         })
      })
      

      【讨论】: