ui-routerは状態のカスタムプロパティで "Resolve"を使用します

Question

私は、ui-routerの状態に基づいてブレッドクラムコンポーネントを作成しています。これは私が達成するものです。

$stateProvider.state('home', { 
    // custom property 
    breadcrumb: 'Home', 
    // other properties 
    // ... 
}); 

$stateProvider.state('home.profile', { 
    breadcrumb: 'Profile', 
    // ... 
}); 

これはうまく動作し、「home.profile」状態を入力すると、「ホーム/プロファイル」ブレッドクラムが表示されます。しかし、どのように動的なデータを表示できますか？ユーザー名に似ています。

<my-component user="$resolve.currentUser.username"></my-component> 

任意のアイデア：私は、コンポーネントを使用すると、あなたがこれを行うことができます$の解決サービスがあることを知っている

$stateProvider.state('home.profile', { 
    resolve: { 
     currentUser: ($http) => { 
     return $http.get('current-user'); 
     } 
    }, 

    // I would like to "inject" the resolved currentUser 
    breadcrumb: (currentUser) => { 
     return currentUser.username; 
    } 
}); 

：私はこのような何かしたいのですが？

Answer 1

あなたのcustomDataを解決したいユースケースについてはあまりお確かめはできませんが、解決済みのデータをコントローラに注入することができます。

$stateProvider.state('home.profile', { 
    resolve: { 
     currentUser: ($http) => { 
     return $http.get('current-user'); 
     } 
    }, 
}); 

とあなたのコントローラで：

angular.module('app') 
    .controller('profileCtrl', ['$scope', 'currentUser', function($scope, currentUser) { 

    // you can be sure the data will be here because resolve are resolved before controller is instantiated 
    $scope.UserName = currentUser.username; 
    }]); 

次に、あなたのビューではかなり直感的になります。

<my-component user="UserName"></my-component> //depends how your directive is binded