Ist die Abhängigkeitsinjektion in Angular 2+ teuer?

Question

Betrachten Sie das folgende Beispiel:

@Directive({ 
    selector: '[testActiveTab]' 
}) 
export class ActiveTabDirective { 

    @Input('testActiveTab') active: boolean = true; 

    constructor(
     private parent: TabbedContainerComponent, // <-- 
     private child: TabComponent    // <-- 
    ) { 
    } 

    // ... 

} 

Verwendung in Vorlage:

<test-tabbed-container> 
    <test-tab> 
     <!-- ... --> 
    </test-tab> 

    <test-tab testActiveTab> 
     <!-- ... --> 
    </test-tab> 
</test-tabbed-container> 

Wie Sie wahrscheinlich schon erraten, diese Richtlinie verwendet wird, eine aktive Registerkarte in den Registern Container-Komponente zu markieren. jedoch

das mögliche Problem ist, dass jedes Mal, wenn eine Instanz des ActiveTabDirective erstellt wird, wird der Injektor die parent Saatguts und der child Eigenschaften aufs neue, das heißt, dass wenn n Laschen in dem Behälter sind, 2 * n Initialisierungen passieren.

Die Frage:

Ist Dependency Injection eine teure Operation in Angular2 +? Oder ist es nur ein Verweis, also billig?

Answer 1

Die 'teurness' hier adressiert die Art und Weise hierarchical dependency injection arbeitet in Angular, und Leistung Auswirkungen ist das Ergebnis.

DI kann keine Komponenten instanziieren und injizieren, die nicht mit den kompilierten Elementen verknüpft sind.

Provider sind Singletons (im Rahmen des aktuellen Injektors). Wenn ein Anbieter nicht im aktuellen Injektor definiert ist, aber im Elterninjektor instanziiert wurde, wird die vorhandene Providerinstanz injiziert.

Obwohl Injectable, Directive und Component Klassen alle injizierbaren sind, Angular unterscheidet eindeutig Richtlinien/Komponenten (definiert in declarations) von regelmäßigen Anbietern (definiert in providers), und sie verhalten sich anders. Direktiven/Komponenten werden vom Compiler instanziiert, sodass keine zusätzliche Instanz versehentlich eingefügt werden kann.

constructor(
    private parent: TabbedContainerComponent, 
    private child: TabComponent 
) {} 

injizieren vorhandene Komponenteninstanzen oder werfen, wenn keine vorhanden sind. Wo "Kind" tatsächlich "selbst" ist, weil Kinder noch nicht kompiliert wurden und mit ViewChild oder falls erforderlich abgerufen werden sollten.