web-dev-qa-db-ja.com

anglejsコンポーネントでresolveを使用する

ページをレンダリングする前に、顧客のリストを解決しようとしています。

これが状態プロバイダーのリファレンスで、resolveメソッドがあります。

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

解決関数を実行していることがわかりますので、機能しますが、メソッドは挿入されません。何か案は？

angularjsresolveangularjs-componentsangularjs-provider
9
Tori Huang

解決を機能させるために、コードに属性とバインディングがありません。

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: "<",
       }       
  });
}());
8
Win

コンポーネントにバインディングを追加し、コントローラー関数から削除します

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);
    }
    ....
1
Victor P