In AngularJS 1, se vuoi attivare lo stato di visualizzazione degli elementi DOM, probabilmente userai i comandi integrati in AngularJS 1, come ng-show o ng-hide:
Esempio di AngularJS 1:
In angular2, la nuova sintassi template permette di associare espressioni a qualsiasi proprietà nativa degli elementi DOM. Questa funzione assolutamente fantastica apre infinite possibilità. Uno di questi è associare l'espressione alla proprietà nascosta nativa, che è un po' come ng-show, e imposta anche display: none per l'elemento:
[Esempio nascosto] di Angular2 (non consigliato):
A prima vista, l'esempio sopra sembra essere ng-show in AngularJS 1. Anzi, sì! Differenze importanti.
Sia ng-show che ng-hide controllano lo stato di visualizzazione degli elementi DOM tramite una classe CSS chiamata ng-hide, che semplicemente imposta l'elemento come display: none. La chiave qui è che AngularJS 1 è stato aggiunto alla classe ng-hide! importante, che regola la priorità della classe in modo che possa sovrascrivere l'assegnazione dell'attributo di visualizzazione dell'elemento da altri stili.
Tornando a questo esempio, lo stile display: none sull'attributo nascosto nativo è implementato dal browser. La maggior parte dei browser non lo usa! è importante regolarne la priorità. Pertanto, controllare lo stato di visualizzazione di un elemento usando [hidden]="expression" può facilmente essere accidentalmente sovrascritto da altri stili. Ad esempio: se scrivo uno stile simile per questo elemento altrove, display: flex, questo ha la precedenza sulla proprietà nascosta nativa (vedi qui).
Per questo motivo, di solito usiamo *ngIf per alternare lo stato di presenza dell'elemento e raggiungere lo stesso obiettivo:
*ngIf esempio di angular2 (consigliato):
A differenza della proprietà nascosta nativa, *ngIf in angular2 non è vincolato a stile. Non importa che tipo di CSS scrivi, lei è al sicuro. Tuttavia, è comunque necessario menzionare che *ngIf non controlla lo stato di visualizzazione dell'elemento, ma ottiene direttamente l'effetto di visualizzare o meno aggiungendo/rimuovendo l'elemento dal template.
Naturalmente, puoi anche aggiungere una priorità nascosta all'attributo nascosto di un elemento usando uno stile globale, come display: non!important, per ottenere questo effetto. Potresti chiederti, dato che il gruppo angolare conosce questi problemi, perché non aggiungere semplicemente uno stile hidden globale con priorità massima a quello hidden nel framework? La risposta è che non possiamo garantire che aggiungere stili globali sia la scelta migliore per tutte le applicazioni. Poiché questo approccio in realtà rompe la funzionalità che si basa su capacità nascoste native, lasciamo la scelta agli ingegneri.
|
Pubblicato su 22/05/2019 14:02:02
|
|
|
