Wie kennt Angular 2 die Elterninstanz ohne expliziten Code?

Question

Könnte jemand bitte etwas Licht auf mich werfen. Ich habe this example gefolgt, um eine einfache Zauberer-App in Angular 2 zu skizzieren. Es funktioniert wie ein Charme, außer - was mich wirklich stört, ist der Konstruktor in der Datei my-wizard-step.ts. Wie kommt es, dass das Privateigentum private parent: MyWizard automatisch ausgefüllt wird und diese Zeile this.step = this.parent.addStep(); in my-wizard-step.ts funktioniert out of the Box?

Ich denke, es gibt etwas implizites Geschehen, das ich nicht ganz verstehe.

Woher weiß Angular, dass der Elternteil eine Instanz von MyWizard ist, die MyWizardStep enthält? Es ist fast gleichbedeutend mit jQuerys .closest('.myWizard'), aber ich kenne die Regeln von Angular2 nicht, die dahinter stehen.

Wer ist es mir bitte erklären?

Answer 1

In Angular 2 hat jede Komponente ihren eigenen Injektor. Diese "Injektoren" bilden einen Baum, der den Baum der Komponenten selbst widerspiegelt. Wenn Sie in einer Komponente nach einem Service fragen, versucht das Angular DI-System zuerst einen Anbieter für diesen Service im Injektor dieser Komponente und dann im Injektor für die Elternkomponente zu suchen und fährt im gesamten Komponentenbaum nach oben fort.

Das letzte Teil des Puzzles ist, dass sich jede Komponente in ihrem eigenen Injektor registriert. Wenn Sie in Ihrem Beispiel nach einer Instanz von MyWizard fragen, sucht das DI-System nach einem Anbieter im Injektor der MyWizardStep-Komponente und findet es nicht. Dann sucht es nach dem übergeordneten Element von MyWizardStep (MyWizard) und fragt den Injektor nach eine Instanz der MyWizard-Klasse. Da sich jede Komponente in ihrem eigenen Injektor registriert, ist MyWizard als injizierbare Klasse verfügbar.

Siehe the Angular 2 advanced guide on dependency injection