angularjs – 角度1.5组件依赖注入

发布时间：2020-12-17 07:37:50 所属栏目：安全来源：网络整理

导读：我一直在尝试在项目中使用新的Angular 1.5组件语法,但是我无法弄清楚如何将依赖项注入到组件定义中. 这是我尝试重构组件的现有指令： angular .module('app.myModule') .component('row',{ bindings: { details: '@',zip: '@' },controller: 'RowController'

我一直在尝试在项目中使用新的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的一部分.

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

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

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

还支持简化安全数组符号：

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!