In AngularJS 1 wirst du, wenn du den Anzeigezustand von DOM-Elementen umschalten möchtest, wahrscheinlich die eingebauten Befehle in AngularJS 1 verwenden, wie ng-show oder ng-hide:
Beispiel AngularJS 1:
In Angular2 ermöglicht die neue Template-Syntax, Ausdrücke an beliebige native Eigenschaften von DOM-Elementen zu binden. Dieses absolut großartige Feature eröffnet unendliche Möglichkeiten. Eine davon ist, den Ausdruck an die native versteckte Eigenschaft zu binden, was ein wenig wie ng-show ist, und setzt auch Display: none für das Element:
[verstecktes] Beispiel von Angular2 (nicht empfohlen):
Auf den ersten Blick scheint das obige Beispiel ng-show in AngularJS 1 zu sein. Tatsächlich haben sie das! wichtige Unterschiede.
Sowohl ng-show als auch ng-hide steuern den Anzeigezustand von DOM-Elementen über eine CSS-Klasse namens ng-hide, die das Element einfach auf display: none setzt. Der Schlüssel ist, dass AngularJS 1 zur ng-hide Klasse hinzugefügt wurde! wichtig, das die Priorität der Klasse so anpasst, dass sie die Zuweisung des Display-Attributs des Elements aus anderen Stilen überschreiben kann.
Zurück zu diesem Beispiel: Der Stil Anzeige: None auf dem nativen versteckten Attribut wird vom Browser implementiert. Die meisten Browser nutzen das nicht! Wichtig ist, seine Priorität anzupassen. Daher kann die Steuerung des Anzeigezustands eines Elements mit [verborgen]="Ausdruck" leicht versehentlich von anderen Stilen überschrieben werden. Zum Beispiel: Wenn ich einen solchen Stil für dieses Element an anderer Stelle schreibe, display: flex, hat dies Vorrang vor der nativen verborgenen Eigenschaft (siehe hier).
Aus diesem Grund verwenden wir normalerweise *ngIf, um den Elementpräsenzzustand umzuschalten und so dasselbe Ziel zu erreichen:
*ngIf-Beispiel von angular2 (empfohlen):
Im Gegensatz zur nativen versteckten Eigenschaft ist *ngIf in angular2 nicht stilbeschränkt. Egal, welche Art von CSS du schreibst, sie ist sicher. Es ist jedoch dennoch wichtig zu erwähnen, dass *ngIf den Anzeigezustand des Elements nicht kontrolliert, sondern direkt den Effekt der Darstellung oder Nicht-Darstellung erreicht, indem das Element aus der Vorlage hinzugefügt oder entfernt wird.
Natürlich kann man dem versteckten Attribut eines Elements auch eine versteckte Priorität hinzufügen, indem man einen globalen Stil wie display: none !important verwendet, um diesen Effekt zu erzielen. Sie fragen sich vielleicht, da die Angular-Gruppe diese Probleme kennt, warum sie nicht einfach einen globalen Hided-Style mit der höchsten Priorität zum Hidden im Framework hinzufügen? Die Antwort ist, dass wir nicht garantieren können, dass das Hinzufügen globaler Stile für alle Anwendungen die beste Wahl ist. Da dieser Ansatz tatsächlich die Funktionalität zerstört, die auf nativen versteckten Fähigkeiten basiert, überlassen wir die Entscheidung den Ingenieuren.
|
Veröffentlicht am 22.05.2019 14:02:02
|
|
|
