UIルータ：理解の解決は、ルートサブ状態の流れを約束します

Question

私はui - routerを使って角型アプリケーションを開発しています。

私は非同期を解決するための抽象的なものであるルート状態を作成しました。依存関係。 私の観点からみると、すべてのサブ状態は、それ自身の状態プロパティを解決する際にそれらの依存関係を使用できるはずです。 abstractルート状態が非同期依存関係を解決し、サブ状態もasyc依存関係を解決する場合、後者は、自身の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'); 
      }); 
     } 
    } 
}) 

しかし、出力は私の期待とは異なります。あなたの例では

Answer 1

、「app.my-呼び出しは」確かに「アプリ」状態の後に作成されます（をロギングすることでこれを確認することができますコールバックフォーカス取得時。）

From Ui-router wiki

解決

解決策を使用して、状態に特有のコンテンツまたはデータをコントローラに提供できます。 resolveは、コントローラに注入されるべき依存関係のオプションのマップです。

これらの依存関係のいずれかが約束されている場合、それらは解決され、コントローラがインスタンス化されて$ stateChangeSuccessイベントが発生する前に値に変換されます。

解決コールバックは、状態の作成を遅らせるのには使用されませんが、コントロールの作成が遅れます。完全な流れを理解することが

、あなたは$ stateChangeStart & $ stateChangeSuccessイベントをログに記録することができます。

Answer 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'); 
     }); 
    } 
} 
}) 

サブ状態は、依存関係として、親状態を持っている必要があります