Utiliser la résolution avec le composant angularjs

Question

J'essaie de résoudre une liste de clients avant de rendre une page.

Voici la référence du fournisseur d'état, où j'ai les méthodes de résolution.

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

Suivie par le composant, qui aurait dû appeler le #test de résolution. Tout ce qu'il devrait faire est d'imprimer le mot «nihao» sur la console.

(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, 
    }); 
}()); 

Cependant, je continue à obtenir cette erreur:

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 

Je peux voir qu'il exécute les fonctions de résolution, de sorte que les travaux, mais il ne sera pas injecter les méthodes! Des idées?

Answer 1

Votre code manque d'attribut et de liaison pour que la résolution fonctionne.

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

Answer 2

Ajouter des liaisons à votre composant et le supprimer de votre fonction de contrôleur

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