Verwenden Sie auflösen mit angularjs Komponente

Question

Ich versuche, eine Liste der Kunden vor dem Rendern einer Seite aufzulösen.

Hier ist die State-Provider-Referenz, wo ich die Auflösung Methoden haben.

Gefolgt von der Komponente, die den #test aus der Auflösung aufgerufen haben sollte. Alles was es tun sollte, ist das Wort "Nihao" auf die Konsole zu drucken.

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

Allerdings habe ich immer diesen Fehler:

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 

Ich kann sehen, dass es die Entschlossenheit Funktionen ausgeführt wird, so dass die Arbeiten, aber es werden die Methoden nicht spritzen! Irgendwelche Ideen?

Answer 1

Ihr Code fehlt Attribut und Bindung, damit die Lösung funktioniert.

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

hinzufügen Bindungen zu Ihrer Komponente und entfernen Sie sich von Ihrer Controller-Funktion

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