In AngularJS 1, als je de weergavestatus van DOM-elementen wilt wisselen, gebruik je waarschijnlijk de ingebouwde commando's in AngularJS 1, zoals ng-show of ng-hide:
Voorbeeld van AngularJS 1:
In Angular2 maakt de nieuwe sjabloonsyntaxis het mogelijk om expressies te binden aan elke native eigenschappen van DOM-elementen. Deze absoluut geweldige functie opent eindeloze mogelijkheden. Een daarvan is om de expressie te binden aan de native verborgen eigenschap, wat een beetje lijkt op ng-show, en zet ook display: none voor het element:
[verborgen] voorbeeld van Angular2 (niet aanbevolen):
Op het eerste gezicht lijkt het bovenstaande voorbeeld ng-show in AngularJS 1. Sterker nog, dat hebben ze! belangrijke verschillen.
Zowel ng-show als ng-hide regelen de weergavestatus van DOM-elementen via een CSS-klasse genaamd ng-hide, die het element simpelweg op display: none zet. Het belangrijkste hier is dat AngularJS 1 is toegevoegd aan de ng-hide klasse! belangrijk, die de prioriteit van de klasse aanpast zodat deze de toewijzing van het display-attribuut van het element uit andere stijlen kan overschrijven.
Terug naar dit voorbeeld, de display: none-stijl op het native verborgen attribuut wordt door de browser geïmplementeerd. De meeste browsers gebruiken het niet! Belangrijk om de prioriteit aan te passen. Daarom kan het aansturen van de weergavestatus van een element met [verborgen]="expressie" gemakkelijk per ongeluk worden overschreven door andere stijlen. Bijvoorbeeld: als ik zo'n stijl voor dit element elders schrijf, display: flex, dit gaat voor boven de native hidden property (zie hier).
Om deze reden gebruiken we meestal *ngIf om de aanwezigheidsstatus van het element te wisselen en hetzelfde doel te bereiken:
*ngIf voorbeeld van angular2 (aanbevolen):
In tegenstelling tot de native hidden property is *ngIf in angular2 niet stijlgebonden. Wat voor soort CSS je ook schrijft, ze is veilig. Het is echter nog steeds nodig te vermelden dat *ngIf de weergavetoestand van het element niet beheerst, maar direct het effect van wel of niet weergeven bereikt door het element toe te voegen of te verwijderen uit het sjabloon.
Natuurlijk kun je ook een verborgen prioriteit toevoegen aan het verborgen attribuut van een element door een globale stijl te gebruiken, zoals display: none !important, om dit effect te bereiken. Je vraagt je misschien af, aangezien de angular-groep deze problemen kent, waarom zou je dan niet gewoon een globale verborgen stijl met de hoogste prioriteit toevoegen aan de verborgen stijl in het framework? Het antwoord is dat we niet kunnen garanderen dat het toevoegen van globale stijlen de beste keuze is voor alle toepassingen. Omdat deze aanpak de functionaliteit die afhankelijk is van native verborgen mogelijkheden juist breekt, laten we de keuze aan de engineers over.
|
Geplaatst op 22-05-2019 14:02:02
|
|
|
