UI-Router verwenden "Resolve" im Zustand benutzerdefinierte Eigenschaft

Question

Ich mache eine Breadcrumb-Komponente basierend auf UI-Router-Status. Das ist es was ich erreicht habe.

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

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

So funktioniert das gut und wenn ich den 'home.profile' Zustand betreten, I "Home/Profile" Brotkrümel erhalten. Aber wie kann ich dynamische Daten anzeigen? Wie der Benutzername. Ich möchte das so etwas wie:

$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; 
    } 
}); 

Ich weiß, dass Komponenten gibt es ein $ resolve-Dienst, wo Sie dies tun können:

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

Irgendwelche Ideen?

Answer 1

Nicht sicher über Ihren Anwendungsfall, wo Sie Ihre customData lösen möchten, aber Sie können Ihre aufgelösten Daten in Ihren Controller injizieren.

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

und in Ihrem Controller:

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; 
    }]); 

Ihre Ansicht Dann wird es ziemlich intuitiv sein:

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