Angular 1.5组件依赖注入

Question

我一直在尝试component在项目中使用新的Angular 1.5 语法,但我无法弄清楚如何将依赖项注入组件定义.

这是我尝试将现有指令重构为组件:

angular
    .module('app.myModule')
    .component('row', {
      bindings: {
        details: '@',
        zip: '@'
      },
      controller: 'RowController',
      templateUrl: basePath + 'modules/row.html' // basePath needs to be injected
    })

由于各种原因,我们将常量basePath作为templateUrl的一部分注入到我们的所有指令中.

如何在组件上执行此操作,因为组件定义不是函数？

Answer 1

您可以使用函数templateUrl来构造URL.但是,与指令不同,组件templateUrl功能是可注入的(ref docs),这意味着您可以向其中注入常量(或任何其他可注入服务).正是你需要的:

.component('row', {
  bindings: {
    details: '@',
    zip: '@'
  },
  controller: 'RowController',
  templateUrl: function(basePath, $rootScope) { // $rootScope is an example here
    return basePath + 'modules/row.html'
  }
})

还支持Minification-safe数组表示法:

templateUrl: ['basePath', '$rootScope', function(basePath, $rootScope) {
  return basePath + 'modules/row.html'
}]

演示: http ://plnkr.co/edit/jAIqkzZGnaEVPaUjyBrJ？p = preview