angularjs 1.5 组件依赖注入

Question

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

我是组件的新手，如何像这样向我的组件注入常量 Utils 或 authService？

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

谢谢！

Answer 1

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

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

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

Answer 2

您可以像这样向组件控制器注入服务：

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 3

已接受的答案缩小不安全。您也可以在这里使用缩小安全的依赖注入符号：

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

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

Answer 4

对于使用 Factory 样式服务的 函数式编程 ，以下语法可以完成工作：

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";
                }
    };
}]);

注意事项：您为组件设置的同一组件service/factory也可注入（因此可访问）应用中的其他任何地方，包括父范围和其他组件范围。这很强大，但很容易被滥用。因此，建议组件只在自己的范围内修改数据，这样就不会混淆谁在修改什么。有关更多信息，请参阅 https://docs.angularjs.org/guide/component#component-based-application-architecture .
然而，即使是上述 link 中的讨论也只针对使用绑定对象时，请谨慎使用 '=' 的双向绑定属性值。因此，同样的推理也适用于组件服务和工厂。如果您计划在其他组件范围 and/or 父范围中使用相同的服务或工厂，我建议在您的父范围所在的位置或您预期的 services/factories 所在的位置设置您的 service/factory。特别是如果您有许多组件使用相同的 service/factory。您不希望它位于某个难以找到的任意组件模块中。

angularjs 1.5 组件依赖注入

angularjs 1.5 component dependency injection

angularjs

angularjs-directive

angularjs-components