本文介绍了如何在 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: '='
},

演示 Plunkr

这篇关于如何在 Angular 1.5 组件中等待 UI Router Resolve 的承诺的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-25 23:34