angularjs 1.5 组件依赖注入

Posted 2023-02-23

【中文标题】angularjs 1.5 组件依赖注入

【英文标题】：angularjs 1.5 component dependency injection

【发布时间】：2016-04-25 18:55:33

【问题描述】：

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

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

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

谢谢！

【参考方案1】：

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

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

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

【讨论】：

不可否认，这不是很直观，因为使用指令您必须在数组和函数头中指定注入，并且移动到组件控制器消除了这种模式。 （但在 Angular 的文档中没有很好地讨论）。我花了很多时间寻找相同的结论。谢谢！

【参考方案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';
    

【讨论】：

添加以防 ES6 需要将参数分配给局部变量 class FranchisesController constructor($state) this.$state = $state; addFranchise() this.$state.go('franquicias.agregar');

你是从哪里找到这个的？我在docs.angularjs.org/guide/component 的文档中找不到这个。干杯

@NickWhiu 你可以在依赖注入部分找到它 - docs.angularjs.org/guide/di

【参考方案3】：

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

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

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

【参考方案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";
                
    ;
]);     

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