应用程序重新加载时的角度解析

Angular Resolve on Application Reload

本文关键字：新加载 加载 应用程序      更新时间：2023-09-26

如何在页面重新加载时延迟应用程序控制器（路由器中的"resolve"属性）的初始化？或者更好的问题是，我如何将视图延迟到我的控制器检索到用户对象，特别是在页面重新加载时？

我目前在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()
    })
}

这将检查auth令牌，然后使用该令牌从数据库中获取用户对象。

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

如何将此视图的显示延迟到初始用户请求完成？

想明白了。我刚刚创建了一个顶级的$scope布尔值$scope.initResolved，它通过完成第一次用户检查（无论是否检索用户）而呈现为true，并将标头和ng视图设置为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

这应该放在您状态的resolve中，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
   })
})
相关文章：