首頁猿問 angularjs...

angularjs ui-route resolve 沒有正常工作

JavaScript

拉風(fēng)的咖菲貓 2018-10-18 14:11:09

在angularjs ui-route 某個(gè)state中配置了一個(gè)resolve，要求登錄后才能跳轉(zhuǎn)Login: ['LoginResolve',function(LoginResolve){return LoginResolve.Login;}]這個(gè)LoginResolve具體實(shí)現(xiàn)如下：class LoginResolve { login (LoginService, $q) { if (LoginService.isLoggedIn() !== true) { return LoginService.checkLoggedInStatus() .catch(_error); } function _error () { return $q.reject('requireLogin'); } } } LoginResolve.prototype.login.$inject = ['LoginService', '$q'];在 if (LoginService.isLoggedIn() !== true)這個(gè)位置斷點(diǎn)發(fā)現(xiàn)不會(huì)跳進(jìn)來，不知道怎么回事。我的app是這樣：angular.module('myapp',[uiRoute, common.name, loginRoute.name, personRoute.name])common是這樣：不知道為什么在personRoute的config中的resolve使用ES6的LoginService無法工作，我用LoginTry改寫一下：然后替換LoginService就可以好使一次,第二次就不會(huì)發(fā)送http請(qǐng)求了.

查看完整描述

1 回答

拉丁的傳說

TA貢獻(xiàn)1789條經(jīng)驗(yàn) 獲得超8個(gè)贊

把resolve中的{return LoginResolve.Login;}]改成{LoginResolve.Login();}]每次就會(huì)跳進(jìn)if判斷語句中去了，但是這時(shí)候又顯示LoginService是undefined，估計(jì)這個(gè)service沒有注入進(jìn)來，明明已經(jīng)inject了。哎，再查一查，有結(jié)果再放上來。

現(xiàn)在修改了一下，問題得到了解決：
正確的resolve應(yīng)該這么寫：

Login: ['LoginResolve', function(LoginResolve){return LoginResolve.login();}]

正確的LoginResolveES6的寫法如下：

class LoginResolve {
    constructor (LoginService, $q){
        Object.assign(this, {LoginService, $q});
    }
    login () {        const self = this;        if (self.LoginService.isLoggedIn() !== true) {            
    return self.LoginService.checkLoggedInStatus()
                 .catch(_error);
        }        function _error () {            return self.$q.reject('requireLogin');
        }
    }
}

LoginResolve.$inject = ['LoginService', '$q'];

當(dāng)然你也可以采用function形式的LoginResolve：

function LoginResolve (LoginService, $q) {
    this.login = function(){        if (LoginService.isLoggedIn() !== true) {            
    return LoginService.checkLoggedInStatus()
                 .catch(_error);
        }        function _error () {            return $q.reject('requireLogin');
        }
    }}
LoginResolve.$inject = ['LoginService', '$q'];

最開始不能通過LoginResolve.prototype.login.$inject = ['LoginService', '$q']來注入LoginService和$q我再研究一下，謝謝評(píng)論。

反對(duì) 回復(fù) 2018-11-18