I AngularJS 1, hvis du vil skifte visningstilstand for DOM-elementer, vil du sandsynligvis bruge de indbyggede kommandoer i AngularJS 1, såsom ng-show eller ng-hide:
AngularJS 1 eksempel:
I Angular2 tillader den nye skabelonsyntaks, at du kan binde udtryk til alle native egenskaber ved DOM-elementer. Denne helt fantastiske funktion åbner uendelige muligheder. En af dem er at binde udtrykket til den oprindelige skjulte egenskab, som minder lidt om ng-show, og sætter også display: none for elementet:
[skjult] eksempel på Angular2 (ikke anbefalet):
Ved første øjekast virker ovenstående eksempel som ng-show i AngularJS 1. Faktisk har de det! vigtige forskelle.
Både ng-show og ng-hide styrer visningstilstanden for DOM-elementer gennem en CSS-klasse kaldet ng-hide, som blot sætter elementet til at vise: none. Nøglen her er, at AngularJS 1 er blevet tilføjet til ng-hide-klassen! vigtigt, som justerer klassens prioritet, så den kan tilsidesætte tildelingen af elementets display-attribut fra andre stilarter.
Tilbage til dette eksempel, visning: ingen-stilen på den native skjulte attribut implementeres af browseren. De fleste browsere bruger det ikke! Det er vigtigt at justere dens prioritet. Derfor kan kontrol af visningstilstanden for et element ved at bruge [skjult]="udtryk" let blive overskrevet ved en fejl af andre stilarter. For eksempel: hvis jeg skriver en sådan stil for dette element et andet sted, display: flex, dette har forrang over den oprindelige skjulte egenskab (se her).
Af denne grund bruger vi normalt *ngIf til at skifte elementets tilstedeværelsestilstand for at opnå det samme mål:
*ngIf eksempel på angular2 (anbefalet):
I modsætning til den oprindelige skjulte egenskab er *ngIf i angular2 ikke stil-begrænset. Uanset hvilken slags CSS du skriver, er hun sikker. Det er dog stadig nødvendigt at nævne, at *ngIf ikke styrer elementets visningstilstand, men direkte opnår effekten af at vise eller ikke vise ved at tilføje/fjerne elementet fra skabelonen.
Selvfølgelig kan du også tilføje en skjult prioritet til den skjulte attribut for et element ved at bruge en global stil, såsom display: none !important, for at opnå denne effekt. Du spørger måske, da angular-gruppen kender disse problemer, hvorfor så ikke bare tilføje en global højprioritets skjult stil til den skjulte i frameworket? Svaret er, at vi ikke kan garantere, at tilføjelse af globale stilarter er det bedste valg for alle anvendelser. Fordi denne tilgang faktisk bryder den funktionalitet, der er afhængig af native skjulte funktioner, overlader vi valget til ingeniørerne.
|
Opslået på 22/05/2019 14.02.02
|
|
|
