将解析与 angularjs 组件一起使用答案

【问题标题】：Use resolve with angularjs component将解析与 angularjs 组件一起使用
【发布时间】：2016-11-25 10:09:30
【问题描述】：

我正在尝试在呈现页面之前解析客户列表。

这里是状态提供者参考，我有解决方法。

angular.module('app')
  .config(($stateProvider) => {
    $stateProvider
      .state('customers', {
        url: '/customers',
        template: '<customers></customers>',
        resolve: {
          test: function () {
            return 'nihao';
          },
        },
      });
  });

后面是组件，它应该从resolve中调用#test。它应该做的就是在控制台打印“nihao”这个词。

(function myCustomersConfig() {
  class MyCustomersComponent {
    constructor(test) {
      this.test = test;
      console.log(this.test);
    }

  angular.module('app').component('myCustomers', {
    templateUrl: 'app/customers/customers.html',
    controller: MyCustomersComponent,
  });
}());

但是，我不断收到此错误：

angular.js:13708 Error: [$injector:unpr] Unknown provider: testProvider <- test
http://errors.angularjs.org/1.5.7/$injector/unpr?p0=testProvider%20%3C-%20test
    at angular.js:68
    at angular.js:4502
    at Object.getService [as get] (angular.js:4655)
    at angular.js:4507
    at getService (angular.js:4655)
    at injectionArgs (angular.js:4679)
    at Object.invoke (angular.js:4701)
    at $controllerInit (angular.js:10234)
    at nodeLinkFn (angular.js:9147)
    at angular.js:9553

我可以看到它正在运行解析函数，所以它可以工作，但它不会注入方法！有什么想法吗？

【问题讨论】：

标签： angularjs resolve angularjs-components angularjs-provider

【解决方案1】：

您的代码缺少属性和绑定，以便解析工作。

angular.module('app')
     ...
       template: '<customers test="$resolve.test"></customers>',           
       resolve: { test: function () { return {value: 'nihao'}; } },
     ...   
  });

(function myCustomersConfig() {

   function MyCustomersComponent {
      // You can use test right away, and also view as $ctrl.test
      console.log(this.test);
   }

  angular.module('app')
    .component('myCustomers', {
       templateUrl: 'app/customers/customers.html',
       controller: MyCustomersComponent,
       bindings: {
          test: "<",
       }       
  });
}());

【讨论】：

和我上个月问的差不多-How to wait for promise from UI Router Resolve in Angular 1.5 Component
所以我尝试了完全就像您提供的示例一样，没有运气：/ 我不断收到错误：“未捕获的类型错误：无法读取未定义的属性 'test'”。你能解释一下绑定在做什么，特别是用“
上面的代码，我忘记了$resolve.。你能再试一次吗？你可以阅读更多Components as route templates
非常感谢您迄今为止的帮助！因此，如果不注入“测试”，我将不再收到上述错误。但是，我在这里匹配了这些更改，包括 $resolve，现在 console.log(this.test) 返回“未定义”。有什么想法吗？
如果 test 是一个字符串 return 'nihao';。你想像this Angular documentation一样使用bindings: { 'test': '@'}。

【解决方案2】：

为您的组件添加绑定并将其从您的控制器函数中删除

angular.module('app').component('myCustomers', {
    templateUrl: 'app/customers/customers.html',
    controller: MyCustomersComponent,
    bindings: {
        'test': '<' // or @ for string
    }
});

class MyCustomersComponent {
    constructor() {
      // this.test should already exist
      console.log(this.test);
    }
    ....

【讨论】：