Question

这可能听起来很新，但我一直在关注angularjs组件tutorial。

我是组件新手，如何将常量Utils或authService注入我的组件？

app.component('tlOverallHeader', {
    bindings: {
        data: '='
    },
    templateUrl: 'js/indexTimeline/components/tl_overallHeader/templates/tl_overallHeader.html',
    controller: function() {
        this.ms = 'tlOverallheader!'
    }
})

谢谢！

Answer 1

您可以将服务注入组件控制器，如下所示：

angular.module('app.module')
        .component('test', {
            templateUrl: 'views/someview.html',
            bindings: {
                subject: '='
            },
            controller: ['$scope', 'AppConfig', TestController]
        });

    function TestController(scope, config) {
        scope.something = 'abc';
    }

或者像这样：

angular.module('app.module')
        .component('test', {
            templateUrl: 'views/someview.html',
            bindings: {
                subject: '='
            },
            controller: TestController
        });

    TestController.$inject = ['$scope', 'AppConfig']
    function TestController(scope, config) {
        scope.something = 'abc';
    }

Answer 2

您应该能够像单独的控制器一样将服务注入到组件的控制器中：

controller: function(Utils, authService) {
    this.ms = 'tlOverallheader!'

    authService.doAuthRelatedActivities().then(...);
}

Answer 3

接受的答案不是缩小安全。您也可以在这里使用缩小安全依赖注入表示法：

controller: ['Utils', 'authService',
  function(Utils, authService) {
    this.ms = 'tlOverallheader!'

    authService.doAuthRelatedActivities().then(...);
  },
]

Answer 4

对于使用工厂样式服务的功能样式编程，以下语法可以完成工作：

angular.module('myApp')

.component('myComponent', {
    templateUrl: 'myTemplate.html',
    controller: ['myFactory', function(myFactory){
        var thisComponent = this;
        thisComponent.myTemplatemsg = myFactory.myFunc();
    }]
})


.factory('myFactory', [ function(){

    return {
        myFunc: function(){
                    return "This message is from the factory";
                }
    };
}]);

一句话警告：您为组件设置的相同组件服务/工厂也可以在应用程序的任何其他位置注入（并因此可访问），包括父范围和其他组件范围。这很强大，但很容易被滥用。因此，建议组件只修改自己范围内的数据，这样就不会混淆谁修改了什么。有关详情，请参阅https://docs.angularjs.org/guide/component#component-based-application-architecture 但是，即使上述链接中的讨论也只涉及到使用绑定对象时，谨慎使用'='的双向绑定属性值。因此，相同的推理应适用于组件服务和工厂。如果您计划在其他组件范围和/或父范围内使用相同的服务或工厂，我建议您设置父范围所在的服务/工厂或您的目标服务/工厂所在地。特别是如果您有许多组件使用相同的服务/工厂。你不希望它位于一些难以找到的任意组件模块中。

angularjs 1.5组件依赖注入

4 个答案: