W AngularJS 1, jeśli chcesz przełączyć stan wyświetlania elementów DOM, prawdopodobnie użyjesz wbudowanych poleceń w AngularJS 1, takich jak ng-show lub ng-hide:
Przykład AngularJS 1:
W Angular2 nowa składnia szablonu pozwala na powiązanie wyrażeń z dowolnymi natywnymi właściwościami elementów DOM. Ta absolutnie niesamowita funkcja otwiera nieskończone możliwości. Jednym z nich jest przypisanie wyrażenia do natywnej ukrytej własności, co jest trochę jak ng-show, a także ustawia display: none dla elementu:
[ukryty] przykład Angular2 (niezalecany):
Na pierwszy rzut oka powyższy przykład wydaje się być ng-show w AngularJS 1. Właściwie to zrobili! ważne różnice.
Zarówno ng-show, jak i ng-hide kontrolują stan wyświetlania elementów DOM za pomocą klasy CSS o nazwie ng-hide, która po prostu ustawia element na display: none. Kluczowe jest to, że do klasy ng-hide dodano AngularJS 1! ważny, który dostosowuje priorytet klasy tak, aby mogła nadpisać przypisanie atrybutu display elementu z innych stylów.
Wracając do tego przykładu, styl display: none na natywnym atributie ukrytym jest zaimplementowany przez przeglądarkę. Większość przeglądarek go nie używa! ważne jest, aby dostosować priorytet. Dlatego sterowanie stanem wyświetlania elementu za pomocą [hidden]="expression" może łatwo zostać przypadkowo nadpisane przez inne style. Na przykład: jeśli zapiszę taki styl dla tego elementu gdzie indziej, display: flex, to ma on pierwszeństwo przed natywną ukrytą własnością (patrz tutaj).
Z tego powodu zwykle używamy *ngIf do przełączania stanu obecności elementu i osiągnięcia tego samego celu:
*ngIf przykład angular2 (zalecany):
W przeciwieństwie do natywnej ukrytej właściwości, *ngIf w angular2 nie jest ograniczony stylem. Bez względu na to, jaki rodzaj CSS napiszesz, jest bezpieczna. Jednak nadal należy zaznaczyć, że *ngIf nie kontroluje stanu wyświetlania elementu, lecz bezpośrednio osiąga efekt wyświetlania lub nie, dodając/usuwając element z szablonu.
Oczywiście możesz też dodać ukryty priorytet do ukrytego atrybutu elementu, używając globalnego stylu, takiego jak display: none !important, aby osiągnąć ten efekt. Możesz zapytać, skoro grupa angular zna te problemy, dlaczego po prostu nie dodać globalnego ukrytego stylu o najwyższym priorytecie do ukrytego w frameworku? Odpowiedź brzmi: nie możemy zagwarantować, że dodawanie globalnych stylów jest najlepszym wyborem dla wszystkich zastosowań. Ponieważ takie podejście faktycznie psuje funkcjonalność opartą na natywnych ukrytych możliwościach, pozostawiamy wybór inżynierom.
|
Opublikowano 22.05.2019 14:02:02
|
|
|
