I AngularJS 1, hvis du vil veksle visningstilstanden til DOM-elementer, vil du sannsynligvis bruke de innebygde kommandoene i AngularJS 1, som ng-show eller ng-hide:
AngularJS 1 eksempel:
I Angular2 lar den nye malsyntaksen deg binde uttrykk til alle native egenskaper til DOM-elementer. Denne helt fantastiske funksjonen åpner uendelige muligheter. En av dem er å binde uttrykket til den innebygde skjulte egenskapen, som er litt som ng-show, og som også setter display: none for elementet:
[skjult] eksempel på Angular2 (ikke anbefalt):
Ved første øyekast virker eksempelet ovenfor som ng-show i AngularJS 1. Faktisk har de det! viktige forskjeller.
Både ng-show og ng-hide kontrollerer visningstilstanden til DOM-elementer gjennom en CSS-klasse kalt ng-hide, som ganske enkelt setter elementet til display: none. Nøkkelen her er at AngularJS 1 har blitt lagt til i ng-hide-klassen! viktig, som justerer klassens prioritet slik at den kan overstyre tilordningen av elementets visningsattributt fra andre stiler.
Tilbake til dette eksempelet, visning: ingen-stilen på det innebygde skjulte attributtet implementeres av nettleseren. De fleste nettlesere bruker det ikke! Viktig å justere prioriteten. Derfor kan kontroll av visningstilstanden til et element ved å bruke [skjult]="uttrykk" lett bli overskrevet ved et uhell av andre stiler. For eksempel: hvis jeg skriver en slik stil for dette elementet et annet sted, display: flex, dette har forrang over den innebygde skjulte egenskapen (se her).
Av denne grunn bruker vi vanligvis *ngIf for å veksle elementets tilstedeværelsestilstand for å oppnå samme mål:
*ngIf-eksempel på angular2 (anbefalt):
I motsetning til den innebygde skjulte egenskapen, er *ngIf i angular2 ikke stil-begrenset. Uansett hvilken type CSS du skriver, er hun trygg. Det er imidlertid fortsatt nødvendig å nevne at *ngIf ikke kontrollerer visningstilstanden til elementet, men oppnår direkte effekten av å vise eller ikke ved å legge til/fjerne elementet fra malen.
Selvfølgelig kan du også legge til en skjult prioritet til det skjulte attributtet til et element ved å bruke en global stil, som display: none !important, for å oppnå denne effekten. Du lurer kanskje på, siden den angulære gruppen kjenner til disse problemene, hvorfor ikke bare legge til en global høyest prioritert skjult stil til den skjulte i rammeverket? Svaret er at vi ikke kan garantere at det å legge til globale stiler er det beste valget for alle applikasjoner. Fordi denne tilnærmingen faktisk ødelegger funksjonaliteten som er avhengig av innebygde skjulte egenskaper, overlater vi valget til ingeniørene.
|
Publisert på 22.05.2019 14:02:02
|
|
|
