如何将价值服务传递给组件？

Question

I'm trying to turn a directive into a component.

I have a value service ('path') defined on the app, which returns a path that was used to create the template url. With the directive it could be injected into the function and then used to create the template url like this:

.directive('myCustomer', [ 'path', function(path) {
  return {
    templateUrl: path + '/customer.html'
  };
}]);

How can I pass 'path' to a component, where I have an object instead of the function?

Answer 1

Use component bindings to consume the value. Refer to docs here

Thanks Ashish

Answer 2

Use this.

template: '<div ng-include="$ctrl.templateUrl">'

store the value in templateUrl using component binding.

Answer 3

app.component('myCustomer',  {
    template: `<div ng-include="$ctrl.templateUrl"></div>`,
    controller: ['path', function(path) {
        this.templateUrl = path + '/customer.html'
    }] 
});

Note: As components use isolate scope, appropriate bindings need to be added to both the component and the HTML where it is instantiated.

For more information, see AngularJS Developer Guide - Component-based application architecture .