I AngularJS 1, om du vill växla visningstillståndet för DOM-element, kommer du troligen att använda de inbyggda kommandona i AngularJS 1, såsom ng-show eller ng-hide:
AngularJS 1-exempel:
I Angular2 tillåter den nya mallsyntaxen att du binder uttryck till alla inbyggda egenskaper hos DOM-element. Denna helt fantastiska funktion öppnar upp oändliga möjligheter. En av dem är att binda uttrycket till den inbyggda dolda egenskapen, vilket är lite som ng-show, och sätter även display: none för elementet:
[dolt] exempel på Angular2 (ej rekommenderat):
Vid första anblicken verkar exemplet ovan vara ng-show i AngularJS 1. Faktum är att de har det! viktiga skillnader.
Både ng-show och ng-hide styr visningstillståndet för DOM-element genom en CSS-klass kallad ng-hide, som helt enkelt sätter elementet till display: none. Nyckeln här är att AngularJS 1 har lagts till i ng-hide-klassen! Important, som justerar klassens prioritet så att den kan åsidosätta tilldelelsen av elementets displayattribut från andra stilar.
Tillbaka till detta exempel, visning: ingen-stilen på det inbyggda dolda attributet implementeras av webbläsaren. De flesta webbläsare använder det inte! Viktigt att justera dess prioritet. Därför kan styrning av visningstillståndet för ett element med [dold]="expression" lätt av misstag skrivas över av andra stilar. Till exempel: om jag skriver en sådan stil för detta element någon annanstans, display: flex, detta går före den inbyggda dolda egenskapen (se här).
Av denna anledning brukar vi använda *ngIf för att växla elementnärvarotillståndet för att uppnå samma mål:
*ngIf exempel på angular2 (rekommenderat):
Till skillnad från den inbyggda dolda egenskapen är *ngIf i angular2 inte stilbegränsad. Oavsett vilken typ av CSS du skriver är hon säker. Det är dock fortfarande nödvändigt att nämna att *ngIf inte styr elementets visningstillstånd, utan direkt uppnår effekten av att visa eller inte visa genom att lägga till/ta bort elementet från mallen.
Självklart kan du också lägga till en dold prioritet till det dolda attributet för ett element genom att använda en global stil, såsom display: none !important, för att uppnå denna effekt. Du kanske undrar, eftersom den angulära gruppen känner till dessa problem, varför inte bara lägga till en global högst prioriterad dold stil till den dolda i ramverket? Svaret är att vi inte kan garantera att det bästa valet är att lägga till globala stilar för alla tillämpningar. Eftersom detta tillvägagångssätt faktiskt bryter den funktionalitet som bygger på inbyggda dolda funktioner, lämnar vi valet till ingenjörerna.
|
Publicerad på 2019-05-22 14:02:02
|
|
|
