So erhalten Sie einen Verweis auf die mit ElementRef verknüpfte Komponente in Angular 2
Ich habe diese Komponente in meiner Vorlage:
%Vor% Die vector-editor hat die folgende Struktur:
In meiner Anwendung nehme ich einen Verweis auf #scaleControl mit
Wenn ich nun scaleControl an die Konsole ausgabe, bekomme ich folgendes Ergebnis:
Wie zu sehen ist, ist die Referenz nicht null und alle Eigenschaften meiner Komponente sind dort. Ich möchte auf diese Eigenschaften zugreifen, aber im Code ist der tatsächliche Typ von scaleControl ElementRef und nicht VectorEditorControl , wie in der Ausgabe zu sehen ist. Aus diesem Grund erlaubt TypeScript mir nicht, this.scaleControl.x zu verwenden.
Ich habe auch versucht, ElementRef so zu präsentieren
, aber ich bekomme eine Fehlermeldung, dass ich ElementRef nicht auf VectorEditorControl
Am Ende habe ich versucht auf this.scaleControl.nativeElement zuzugreifen, aber es ist nicht definiert ...
Was fehlt mir hier?
2 Antworten
Sie sollten die folgenden Informationen zur Verwendung der Eigenschaft @ViewChild kennen Dekorateur.
Es verwendet die folgenden Metadateneigenschaften:
- selector - der Anweisungstyp oder der Name, der für die Abfrage verwendet wird.
- read - liest ein anderes Token von den abgefragten Elementen.
Aus dem Quellcode:
%Vor% Wenn Sie den read -Parameter nicht angeben, gibt @ViewChild() das:
- Komponenteninstanz, falls vorhanden.
-
ElementRefInstanz, wenn keine Komponente angewendet wurde - anderes Token von den abgefragten Elementen, wenn Sie Leseeigenschaft festlegen
Wenn Sie ElementRef von der untergeordneten Komponente angular2 ( VerticeControlComponent ) erhalten möchten, müssen Sie dies explizit mit read: ElementRef :
Und dann innerhalb von ngAfterViewInit Hook oder später können Sie this.scaleControl.nativeElement schreiben, um ein DOM-Element zu erhalten.
Aktualisieren
Ich schrieb früh:
- anderes Token von den abgefragten Elementen, wenn Sie Leseeigenschaft festlegen
Nun möchte ich hinzufügen, was genau wir lesen können:
-
ElementRef
-
TemplateRef
-
ViewContainerRef
-
Anbieter
Was bedeutet Provider hier?
Es bedeutet, dass wenn wir einen Provider (in einer Komponente oder einer Direktive) für ein bestimmtes Element definiert haben, wir es lesen können.
%Vor%So können wir im Consumer dieser Komponente schreiben
%Vor%, um den Wert x zu erhalten.
Siehe auch:
Ich habe diesen Fehler zweimal erhalten. Einmal in meinem Hauptcode und zum zweiten Mal im Testcode (spec).
Beide Male fehlte eine Referenz. Der eckige Compiler (transpiler) zeigt während der Kompilierung keinen Fehler an, bietet aber später keine Referenz des
-
Zum ersten Mal habe ich diesen Fehler im Hauptcode abc.component.ts bekommen. Ich erinnere mich, dass wir diesmal die für dieses Kind erforderlichen Referenzen in dieser abc.component.ts korrekt aufgenommen haben. Diese untergeordnete Komponente stammt von einem anderen Modul. Der Fehler wurde nur behoben, nachdem diese untergeordnete Komponente nicht in der Datei module.ts enthalten war
Deklarationen: [VectorEditorComponent, ....],
-
Das zweite Mal haben wir dies in der Spezifikationsdatei gesehen. Ich habe versucht, einige Erwartungen zu überprüfen, dass eine Eigenschaft der untergeordneten Komponente festgelegt werden sollte. Ich habe keine Instanz der Kindkomponente erhalten, sondern stattdessen ElementRef. Auch hier gab es keinen Kompilierungsfehler. Das Problem war hier etwas anders. Ich hatte No_Errors_Schema verwendet. Obwohl wir die Komponente nicht in die Spezifikationsdatei aufgenommen hatten, beanstandete eckal nicht, sondern setzte stattdessen ElementRef anstelle der untergeordneten Komponente. Der Fehler ist verschwunden, als wir das Modul importiert haben und dies im Testbed-Setup der Spezifikationsdatei bereitgestellt hat.
Im zweiten Fall kann ich verstehen, dass dies auf kein Fehlerschema zurückzuführen ist. Aber im ersten Fall denke ich, dass das Angular Team sich verbessern muss. Es gibt keinen Hinweis darauf, warum die Komponente nicht bereitgestellt wurde, aber ElementRef bereitgestellt wird.
Tags und Links angular