UI-router：了解根子状态的解决承诺流程答案

【问题标题】：UI-router: understanding resolve promises flow of the root-sub statesUI-router：了解根子状态的解决承诺流程
【发布时间】：2017-07-13 14:49:35
【问题描述】：

我正在使用 ui - router 开发 Angular 应用程序。

我创建了根状态，这是一种旨在解决异步的抽象状态。依赖关系。因此，从我的角度来看，每个子状态都应该能够在自己的解析状态属性中使用这些依赖项。所以如果abstract根状态解析异步依赖，子状态也解析异步依赖，后者应该等待根依赖解决，然后再启动自己的resolve方法。对吧？

这是代码示例，它说明了我的意思：

在相应的解析中使用的基于承诺的异步方法

 public iAmInTheRootState(): IPromise<any> {
    let deferred = this._$q.defer();

    this._$timeout(() => {
        deferred.resolve();
    }, 3000);

    return <IPromise<any>> deferred.promise;
}

public iAmInTheSubState(): IPromise<any> {
    let deferred = this._$q.defer();

    this._$timeout(() => {
        deferred.resolve();
    }, 100);

    return <IPromise<any>> deferred.promise;
}

根抽象状态：

$stateProvider
    .state('app', {
        url: '/',
        abstract: true,
        templateUrl: 'layout/app-view.html',
        resolve: {
            auth: function (Auth: IAuthService) {
                'ngInject';
                return Auth.iAmInTheRootState().then(() => {
                    console.log('I am the root state, so I should be first');
                });
            }
        }
    });

子状态是子状态：

$stateProvider.state('app.my-calls', {
    url: '',
    controller: 'MyCallsController',
    controllerAs: '$ctrl',
    templateUrl: 'states/my-calls/my-calls.html',
    resolve: {
        secondAuth: (Auth: IAuthService) => {
            'ngInject';
            return Auth.iAmInTheSubState().then( () => {
                console.log('although I am faster I should be second because i am in the sub state');
            });
        }
    }
})

但输出与我的预期不同：

【问题讨论】：

标签： javascript angularjs promise angular-ui-router angular-promise

【解决方案1】：

在您的示例中，“app.my-calls”确实是在“app”状态之后创建的（您可以通过记录 onEnter 回调来验证这一点。）

From Ui-router wiki

解决

您可以使用 resolve 为您的控制器提供状态自定义的内容或数据。 resolve 是一个可选的依赖映射，应该注入到控制器中。

如果这些依赖项中的任何一个是承诺，它们将在控制器被实例化并触发 $stateChangeSuccess 事件之前被解析并转换为一个值。

resolve回调不是用来延迟状态创建的，而是用来延迟控制器创建的。

要了解完整流程，您可以记录 $stateChangeStart 和 $stateChangeSuccess 事件。

【讨论】：

【解决方案2】：

虽然 Tim 的回答可以被认为是对我的问题的直接回应，但人们可能想了解如何让子状态等待其父级的解决方法。

查看有关此主题的github issue。

简而言之：子状态应该有父状态作为依赖：

父状态：

$stateProvider
.state('app', {
    url: '/',
    abstract: true,
    templateUrl: 'layout/app-view.html',
    resolve: {
        ParentAuth: function (Auth: IAuthService) {
            'ngInject';
            return Auth.iAmInTheRootState().then(() => {
                console.log('I am the root state, so I should be first');
            });
        }
    }
});

子状态：

$stateProvider.state('app.my-calls', {
url: '',
controller: 'MyCallsController',
controllerAs: '$ctrl',
templateUrl: 'states/my-calls/my-calls.html',
resolve: {
    SubAuth: (ParentAuth, Auth: IAuthService) => {
        'ngInject';
        return Auth.iAmInTheSubState().then( () => {
            console.log('although I am faster I should be second because i am in the sub state');
        });
    }
 }
 })

【讨论】：