В AngularJS 1, ако искате да превключвате състоянието на дисплея на DOM елементите, вероятно ще използвате вградените команди в AngularJS 1, като ng-show или ng-hide:
Пример от AngularJS 1:
В angular2 новият синтаксис на шаблона ви позволява да свързвате изрази с всякакви родни свойства на DOM елементите. Тази абсолютно страхотна функция отваря безкрайни възможности. Едно от тях е да се обвърже изразът с нативното скрито свойство, което е малко като ng-show, и също така да се задава display: none за елемента:
[скрит] пример за angular2 (не се препоръчва):
На пръв поглед горният пример изглежда като ng-show в AngularJS 1. Всъщност, те са го направили! важни разлики.
И ng-show, и ng-hide контролират състоянието на показване на DOM елементите чрез CSS клас, наречен ng-hide, който просто задава елемента да display: none. Ключът тук е, че AngularJS 1 е добавен към класа ng-hid! важно, което коригира приоритета на класа, така че да може да запише присвояването на атрибута за показване на елемента от други стилове.
Връщайки се към този пример, браузърът реализира стилът display: none върху нативния скрит атрибут. Повечето браузъри не го използват! Важно е да се коригира приоритетът му. Следователно, контролирането на състоянието на дисплея на елемент чрез [hidden]="expression" лесно може да бъде случайно презаписано от други стилове. Например: ако напиша такъв стил за този елемент другаде, display: flex, това има предимство пред нативното скрито свойство (виж тук).
Поради тази причина обикновено използваме *ngIf, за да превключим състоянието на присъствие на елемента и да постигнем същата цел:
*ngIf пример за angular2 (препоръчително):
За разлика от естественото скрито свойство, *ngIf в angular2 не е ограничено по стил. Без значение какъв тип CSS напишете, тя е в безопасност. Въпреки това е необходимо да се спомене, че *ngIf не контролира състоянието на дисплея на елемента, а директно постига ефекта на показване или не чрез добавяне/премахване на елемента от шаблона.
Разбира се, можете също да добавите скрит приоритет към скрития атрибут на елемент, като използвате глобален стил, като display: none !important, за да постигнете този ефект. Може да се запитате, след като angular групата познава тези проблеми, защо просто не добавите глобален най-висок приоритет скрит стил към hidden in the framework? Отговорът е, че не можем да гарантираме, че добавянето на глобални стилове е най-добрият избор за всички приложения. Тъй като този подход всъщност нарушава функционалността, която разчита на нативни скрити възможности, оставяме избора на инженерите.
|
Публикувано в 22.05.2019 г. 14:02:02 ч.
|
|
|
