本文介绍了如何在 Angular 1.5 组件中等待 UI Router Resolve 的承诺的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用的是 Angular 1.5 组件.我不知道如何通过 Resolve 获取数据.
I'm using Angular 1.5 Component. I could not figure out how to get the data via Resolve.
你能透露一些信息吗?
Plunker: https://plnkr.co/编辑/2wv4YWn8YQvow6FDcGV0
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="[email protected]" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<script>document.write('<base href="' + document.location + '" />');</script>
<script src="https://code.angularjs.org/1.5.7/angular.js"></script>
<script src="https://code.angularjs.org/1.5.7/angular-route.js"></script>
<script src="app.js"></script>
</head>
<body>
<ng-view></ng-view>
</body>
</html>
app.js
(function () {
angular
.module("app", ['ngRoute'])
.config(function($routeProvider){
$routeProvider
.when("/home", {
template: `<main
promise-followers="$resolve.promiseFollowers"></main>`,
resolve: {promiseFollowers: function ($http) {
$http.get("https://api.github.com/users/octocat/followers")
.then(function(result) {
return result.data;
}, function(result) {
console.log(result);
});
}
},
})
.otherwise({ redirectTo: "/home" } );
})
.component("main", {
template: `<h3>Demo Angular 1.5 Resolver</h3>
<p>Promise Data from Controller :
<select ng-model="$ctrl.selected"
ng-options="option.id as option.login for option in $ctrl.followers"></select>
</p>
<p>Promise Data from Resolve :
<select ng-model="$ctrl.selected"
ng-options="option.id as option.login for option in $ctrl.promiseFollowers"></select>
<span class="label label-danger">Not Working</span>
</p>
<h4>Regular Selector Selected: {{$ctrl.selected}}</h4>`,
controller: function($http){
var self = this;
// This is just testing to to make sure api is working.
$http.get("https://api.github.com/users/octocat/followers")
.then(function(result) {
self.followers = result.data;
}, function(result) {
console.log(result);
});
self.$onInit = function () {
console.log(self.promiseFollowers);
}
}
});
})();
推荐答案
您忘记从 promiseFollowers 承诺中返回承诺.
You had forgot to return a promise from your promiseFollowers promise.
promiseFollowers: function ($http) {
return $http.get(...){
}
}
然后你还需要定义一个 bindings 选项来检索从 resolve 传递的值
And there after you also need to define a bindings option to retrieve a value passed from resolve
bindings: {
promiseFollowers: '='
},
这篇关于如何在 Angular 1.5 组件中等待 UI Router Resolve 的承诺的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！