Jak zdobyć/ustawić/usunąć atrybut elementu w Angular 2, używając "drogi kątowej"?

Question

Czytałem kilka artykułów na temat pułapek Angular 2, a czego unikać, jedna z tych rzeczy dotyczy braku bezpośredniego dostępu do DOM.

Zauważyłem, że Renderer jest bardzo przydatny, ponieważ zawiera pewne metody, które mogą pomóc uniknąć pułapki DOM. Jednak zauważyłem, że nie zawiera on żadnych funkcji, tylko , takich jak setElementAttribute, setElementClass i tak dalej.

Moje pytanie jest więc dość proste, w jaki sposób korzystasz z powyższych funkcji, ale jako wersja get i ? Czy żyją w innej klasie lub na przykład, w jaki sposób pracujesz przy pobieraniu atrybutów lub klas?

Answer 1

Angular2 nie zapewnia żadnej pomocy w uzyskaniu czegokolwiek z DOM z wyjątkiem ElementRef i zdarzeń.
Sposób Angular2 polega na utrzymaniu stanu w modelu i zaktualizowaniu modelu DOM w celu odzwierciedlenia tego stanu.

Jeśli potrzebujesz czytać z DOM, możesz użyć bezpośredniego dostępu do DOM lub niestandardowego Renderer, który zapewnia brakujące funkcje w domyślnej Renderer.

Przykłady zwyczaju renderujących

• Custom renderer for Angular2
• https://github.com/ralfstx/angular2-renderer-example/blob/master/src/custom-renderer.ts

Answer 2

Od getAttribute to jedynie metoda, można użyć invokeElementMethod:

var attr = renderer.invokeElementMethod(elementRef.nativeElement, 'getAttribute', []); 

Ta aplikacja Płoć nie zadziała, jeśli przełączysz się na renderowanie po stronie serwera (z wyjątkiem wywołań zdarzeń, takich jak kliknięcie myszą).

Rozszerzenie DOMRenderer skutecznie oznacza ścisłe połączenie z implementacją przeglądarki, która jest taka sama jak bezpośrednia manipulacja nativeElement.

---

Wydaje się, że nie powinno się powoływać pobierające w ogóle. Pytanie brzmi: dlaczego musisz znać wartość atrybutu lub nazwę klasy?

Można by stworzyć specyficzną dyrektywę lub zmienną szablon i używać go z ViewChild/ViewChildren lub stworzyć odpowiedni model danych i powiązać z [class.name]="nameEnabled"

Answer 3

Aby usunąć klasę, nadal można używać setElementClass The isBool powinien być ustawiony na false. Zobacz ten link, aby uzyskać więcej informacji https://github.com/angular/angular/blob/9de76ebfa545ad0a786c63f166b2b966b996e64c/modules/%40angular/platform-browser/src/dom/dom_renderer.ts#L237

Answer 4

Aby usunąć atrybuty z DOM, podaj wartość null.

Aby ustawić atrybut (wartość atrybutu może być pusty ciąg, jeśli chcesz):

myrenderer.setElementAttribute(elementRef.nativeElement, 'attributename', 'attributevalue'); 

Aby usunąć atrybut:

myrenderer.setElementAttribute(elementRef.nativeElement, 'attributename', null); 

Aby uzyskać element wartość atrybutu, masz nativeElement, który przekazujesz do setElementAttribute, dzięki czemu możesz go użyć do uzyskania wartości atrybutu za pomocą standardowego kodu JavaScript:

elementRef.nativeElement.getAttribute('attributename');