Ich habe einige Artikel über Angular 2 Fallstricke gelesen und was zu vermeiden ist, dreht sich eines dieser Dinge darum, nicht direkt auf das DOM zuzugreifen.
Ich habe bemerkt, dass Renderer ziemlich nützlich ist, da es einige Methoden enthält, die helfen können, den DOM Fallstrick zu vermeiden. Allerdings habe ich bemerkt, dass es keine get Funktionen enthält, nur set Funktionen wie setElementAttribute , setElementClass und so weiter.
Also meine Frage ist ziemlich einfach, wie verwenden Sie die oben genannten Funktionen, sondern als die get und remove Version? Leben sie in einer anderen Klasse oder wie arbeiten Sie zum Beispiel beim Abrufen von Attributen oder Klassen?
Angular2 bietet keine Unterstützung, um etwas vom DOM zu erhalten außer ElementRef und Events.
Die Angular2-Methode besteht darin, den Status im Modell beizubehalten und das DOM entsprechend diesem Status zu aktualisieren.
Wenn Sie aus dem DOM lesen müssen, können Sie den direkten DOM-Zugriff verwenden oder ein benutzerdefiniertes Renderer bereitstellen, das die fehlenden Features im Standard Renderer bereitstellt.
Beispiele für benutzerdefinierte Renderer
Um Attribute aus dem DOM zu entfernen, geben Sie einen Wert von null an.
Um ein Attribut festzulegen (Attributwert kann eine leere Zeichenfolge sein, wenn Sie möchten):
%Vor%Um ein Attribut zu entfernen:
%Vor%Um einen Elementattributwert zu erhalten, haben Sie das nativeElement, das Sie an setElementAttribute übergeben, damit Sie den Attributwert mithilfe von Standard-JavaScript erhalten können:
%Vor% Da getAttribute nur eine Methode ist, könnten Sie invokeElementMethod verwenden:
Dieser Ansatz funktioniert nicht, wenn Sie zum serverseitigen Rendern wechseln (ausgenommen Ereignisrückrufe wie Mausklick).
Das Erweitern von DOMRenderer bedeutet effektiv eine enge Kopplung mit der Browserimplementierung, was der direkten nativeElement -Manipulation entspricht.
Es scheint, dass Sie Getter überhaupt nicht aufrufen sollten. Also die Frage ist, warum müssen Sie Attributwert oder Klassenname wissen?
Sie könnten eine bestimmte Richtlinie oder Vorlagenvariable erstellen und sie mit ViewChild / ViewChildren verwenden oder ein geeignetes Datenmodell erstellen und mit [class.name]="nameEnabled"
Tags und Links angular