Angular 1.5 Komponentenabhängigkeit Injektion

Question

Ich habe versucht, die neue Angular 1.5 component Syntax in einem Projekt zu verwenden, aber ich kann nicht herausfinden, wie eine Abhängigkeit in die Komponentendefinition injizieren.

Hier ist mein Versuch, Refactoring eine bestehende Richtlinie zu einer Komponente:

angular 
    .module('app.myModule') 
    .component('row', { 
     bindings: { 
     details: '@', 
     zip: '@' 
     }, 
     controller: 'RowController', 
     templateUrl: basePath + 'modules/row.html' // basePath needs to be injected 
    }) 

Aus verschiedenen Gründen haben wir die Konstante basePath in allen unseren Richtlinien als Teil des templateUrl injizieren.

Wie mache ich das für eine Komponente, da die Komponentendefinition keine Funktion ist?

Answer 1

Sie können eine Funktion für templateUrl verwenden, um URL zu erstellen. Im Gegensatz zu den Anweisungen ist die Komponente templateUrl jedoch injizierbar (ref docs), was bedeutet, dass Sie konstante (oder andere injizierbare Dienste) injizieren können. Genau das, was Sie brauchen:

templateUrl: ['basePath', '$rootScope', function(basePath, $rootScope) { 
    return basePath + 'modules/row.html' 
}] 

Demo:

.component('row', { 
    bindings: { 
    details: '@', 
    zip: '@' 
    }, 
    controller: 'RowController', 
    templateUrl: function(basePath, $rootScope) { // $rootScope is an example here 
    return basePath + 'modules/row.html' 
    } 
}) 

Minifizierung sichere Array-Notation auch unterstützt wirdhttp://plnkr.co/edit/jAIqkzZGnaEVPaUjyBrJ?p=preview