it-swarm.com.de

injektion von 1,5 Komponentenabhängigkeit

das mag neu klingen, aber ich habe diese Anleitung für die anglejs-Komponente verfolgt.

Ich bin neu bei Komponenten und wie füge ich meiner Komponente eine Konstante Utils oder authService hinzu?

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

vielen Dank!

30
Hokutosei

Sie sollten in der Lage sein, Services wie einen Standalone-Controller in den Controller Ihrer Komponente einzuspeisen:

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

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

Sie können Dienste wie folgt in den Komponentencontroller einspeisen:

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

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

oder so:

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';
    }
43
Gondy

Die akzeptierte Antwort ist nicht minifikationssicher. Sie können auch hier die minification-sichere Abhängigkeitsinjektion verwenden:

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

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

Für die Programmierung von Functional-Styles, die Factory -Dienste verwenden, wird die folgende Syntax ausgeführt:

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

Ein Wort von Achtung: Dieselbe Komponente Service/Factory, die Sie für Ihre Komponente eingerichtet haben, kann auch an anderen Stellen in Ihrer App injiziert werden (und somit auch darauf zugreifen), einschließlich des übergeordneten Bereichs und anderer Komponentenbereiche. Dies ist mächtig, kann aber leicht missbraucht werden. Daher wird empfohlen, dass Komponenten nur Daten in ihrem eigenen Bereich ändern, sodass es keine Verwirrung darüber gibt, wer was ändert. Weitere Informationen hierzu finden Sie unter https://docs.angularjs.org/guide/component#component-based-application-architecture .
Die Diskussion im oben genannten Link behandelt jedoch nur die Vorsichtige Verwendung des bidirektionalen Eigenschaftswerts von '='wenn das Bindings-Objekt verwendet wird. Daher sollte die gleiche Begründung für Komponentendienste und Fabriken gelten. Wenn Sie planen, denselben Dienst oder dieselbe Fabrik in anderen Komponentenbereichen und/oder im übergeordneten Bereich zu verwenden, empfehle ich Ihnen, Ihren Dienst/Ihre Fabrik dort einzurichten, wo sich Ihr übergeordneter Bereich befindet oder wo sich Ihre geplante Dienst-/Fabrikengemeinschaft befindet. Besonders wenn Sie über zahlreiche Komponenten verfügen, die den gleichen Service/die gleiche Fabrik verwenden. Sie möchten nicht, dass es sich in einem beliebigen Komponentenmodul befindet, das schwer zu finden wäre.

0
user5224681