是否可以将服务注入 Angular 1.5 组件的 templateUrl 属性？

Posted 2023-02-23

【中文标题】是否可以将服务注入 Angular 1.5 组件的 templateUrl 属性？

【英文标题】：Is it possible to inject a service into Angular 1.5 component's templateUrl property?

【发布时间】：2016-08-04 20:32:38

【问题描述】：

我的指令需要一个常量 (MODULE_ROOT_URL) 来生成模板路径。使用指令语法，我可以将常量注入到目录工厂函数中。 如何将此指令转换为 Angular 1.5 组件？ 是否可以将服务注入 Angular 1.5 组件？

谢谢。

更新： 我知道服务可以注入到组件控制器中。 但是如何为组件的 templateUrl 属性注入服务呢？

更新2： 请参阅 plnkr。我创建了指令和组件版本。 指令版本工作正常。但是组件版本有错误[ngTransclude:orphan]

https://plnkr.co/edit/DMumuIpXJY6RDCX6XObz?p=preview

angular.module('AbcModule')
       .directive('abcDirective', ['MODULE_ROOT_URL', function (MODULE_ROOT_URL) 
           return 
               restrict: 'E',
               templateUrl:  MODULE_ROOT_URL + 'abc/abc.tpl.html'
           

       ]);

【问题讨论】：

angularjs 1.5 component dependency injection的可能重复

【参考方案1】：

templateUrl 和template 可以是函数，可以注入依赖。

angular.module('AbcModule')
.component('abcDirective',  
     restrict: 'E',
     templateUrl:  function(MODULE_ROOT_URL) 
          return MODULE_ROOT_URL + 'abc/abc.tpl.html';
     
);

【讨论】：

@PankajParkar .directive 是这样，但.component 不是这样。随意阅读文档并尝试一下。

抱歉，你太棒了。 +1，一旦OP接受此答案，我将删除我的答案。只是我在答案中添加了评论以通知您的答案是正确的。 :-)

你应该注意这里显示的注入方法不是缩小安全的。 templateUrl的值也可以是一个数组，其中可注入的服务被指定为字符串，数组的最后一项是函数templateUrl: ['MY_CONST', function (MY_CONST) ... ]

【参考方案2】：

在 Angular 1.4 之前，directive DDO 已由函数返回，您可以在其中拥有依赖项。但是在 Angular 1.5.3 中，我们可以控制在组件的controller 中添加依赖项。您可以使用ng-include 和在控制器中注入依赖项来解决如下问题。

标记

angular.module('AbcModule')
.component('abcDirective', 
  template: '<div ng-include="$ctrl.rootUrl ? $ctrl.rootUrl + \'abc/abc.tpl.html\': \'\'"></div>',
  controller: function(MODULE_ROOT_URL)  //<--injected dependency here.
    var self = this;
    self.rootUrl = MODULE_ROOT_URL;
  
]);

【讨论】：

谢谢。但它不适用于 ng-transclude。如果模板包含 ng-transclude，我已经设置了 transclude: true，用户的内容不会被加载到组件中。

@thermostat 你能给我提供 plunkr/fiddle 吗？

谢谢。请参阅 plnkr。我创建了指令和组件版本。指令版本工作正常。但是组件版本有错误 [ngTransclude:orphan] plnkr.co/edit/DMumuIpXJY6RDCX6XObz?p=preview

@thermostat 查看zeroflagL 添加的上述答案，这对您来说很有希望。