Übergeben Sie die übergeordnete Komponente des gleichen Typs wie die untergeordnete Komponente

Question

Übergeben Sie die übergeordnete Komponente des gleichen Typs wie die untergeordnete Komponente

9

In Angular 2 kann eine untergeordnete Komponente ihre übergeordnete Komponente über einen Konstruktorparameter erhalten. Beispiel:

%Vor%

Dies funktioniert gut und gut, solange die Eltern und Kinder von verschiedenen Typen sind.

Ein weiterer typischer Anwendungsfall ist jedoch eine Baumstruktur, bei der jeder Baumknoten als separate Komponente angezeigt wird. Was sollten wir tun, wenn jede der Baumknoten-Komponenten Zugriff auf ihren übergeordneten Knoten haben sollte? Ich habe es versucht:

%Vor%

Aber das schlägt mit der folgenden Laufzeitausnahme fehl:

%Vor%

Ich vermute, der Grund ist, dass Angular 2 die Komponente selbst anstelle ihrer Hauptkomponente injiziert.

Wie kann ich angular angeben, um die übergeordnete Komponente einer Komponente zu injizieren, obwohl sie vom selben Typ ist?

Plunker Ссылка

dependency-injection angular

user928437 29.02.2016, 19:02

quelle

3 Antworten

Tags und Links dependency-injection angular

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Operator '' kann nicht auf Operanden vom Typ 'dezimal' und 'doppelt' angewendet werden

score 16 · Answer 1

So funktioniert es

%Vor%

Plunker

@SkipSelf() soll nicht injiziert werden, was zutrifft, wenn TreeNodeComponent angefordert wird
@Host() sucht nicht weiter oben als das Host-Element
@Optional() ?? Für den Stammknoten

TreeNodeComponent

Siehe auch Ссылка

score 0 · Answer 2

Angular2 untersucht den aktuellen Injektor für einen Provider. In Ihrem Fall entspricht TreeNodeComponent der Komponente selbst.

Die übergeordnete Komponenteninstanz befindet sich im übergeordneten Injektor.

Ich denke, dass Sie versuchen könnten, eine Injektor-Klasse zu injizieren, um Zugriff auf den Eltern-Injektor zu haben und dann die Instanz der Eltern-Komponente zu bekommen. So ähnlich:

%Vor%

Siehe diesen Link für die Dokumentation der Injector-Klasse:

Ссылка

Ich denke, dass der Kommentar von Gunter über die Bindung und den gemeinsamen Dienst besonders relevant ist.

score 0 · Answer 3

Dieser Beitrag wurde dank Günther gelöst. Ich würde jedoch gerne auf der Grundlage des architektonischen Feedbacks, das ich bekommen habe, nachgehen.

In erster Linie: Ich stimme völlig zu, dass das TreeNodeComponent-Beispiel ein Anti-Pattern ist. Eine datengesteuerte Komponente wie ein Baum sollte durch Datenbindung gesteuert werden. Ich entschuldige mich für dieses Anti-Muster.

Allerdings ist mein tatsächlicher Anwendungsfall (der komplexer zu erklären ist), dass ich ein erweitertes Dropdown-Menü entwickeln möchte. Anforderungen:

Das Dropdown sollte eine beliebige Anzahl von Ebenen haben (Menü, Untermenü, Sub-Submenü usw.)
Das Dropdown wird zur Entwurfszeit definiert - sein Inhalt basiert nicht auf dynamischen Daten.
Es sollte möglich sein, Event-Handler (_) = an jedes Dropdown-Element anzuhängen.
Es sollte möglich sein, benutzerdefinierte Steuerkomponenten in das Dropdown-Menü einzufügen.

Ein Anwendungsbeispiel:

%Vor%

Meine Überlegung ist, dass dies mit Datenbindung schwer zu implementieren wäre. Es ist sehr praktisch, Event-Handler zu binden und benutzerdefinierte Komponenten auf diese Weise einzubinden.

Aber ich könnte falsch liegen! Alle Meinungen dazu sind sehr willkommen!