AngularJS 1'de, DOM öğelerinin görüntüleme durumunu değiştirmek istiyorsanız, muhtemelen AngularJS 1'deki ng-show veya ng-hide gibi yerleşik komutları kullanırsınız:
AngularJS 1 örneği:
angular2'de yeni şablon sözdizimi, ifadeleri DOM öğelerinin herhangi bir yerel özelliklerine bağlamanıza olanak tanır. Bu kesinlikle harika özellik sonsuz olasılıkların kapılarını açıyor. Bunlardan biri, ifadeyi ng-show gibi yerel gizli özellikle bağlamaktır ve ayrıca öğe için display: none ayarlar:
[gizli] Angular2 örneği (tavsiye edilmez):
İlk bakışta, yukarıdaki örnek AngularJS 1'deki ng-show gibi görünüyor. Aslında, öyle oldu! önemli farklılıklar.
Hem ng-show hem de ng-hide, DOM öğelerinin görüntüleme durumunu ng-hide adlı bir CSS sınıfı aracılığıyla kontrol eder; bu sınıf öğeyi basitçe gösterecek şekilde ayarlar: none. Buradaki anahtar, AngularJS 1'in ng-hide sınıfına eklenmiş olması! önemli bir özellik, sınıfın önceliğini ayarlayarak öğenin gösteri özniteliğinin diğer stillerden devredilmesini geçersiz kılabilir.
Bu örneğe geri dönelim, gizli özellikte display: none stili tarayıcı tarafından uygulanmıştır. Çoğu tarayıcı bunu kullanmıyor! önceliğini ayarlamak önemli. Bu nedenle, bir öğenin görüntüleme durumunu [hidden]="expression" kullanarak kontrol etmek, yanlışlıkla diğer stiller tarafından kolayca üzerine yazılabilir. Örneğin: bu öğe için böyle bir stil başka bir yerde, display: flex yazarsam, bu yerel gizli özellikten önceliklidir (buraya bakınız).
Bu nedenle, aynı hedefi elde etmek için eleman varlık durumunu genellikle *ngIf kullanırız:
*ngIf angular2 örneği (önerilir):
Yerel gizli özelliğin aksine, angular2'deki *ngIf stil kısıtlamalı değildir. Hangi tür CSS yazarsanız yaz, o güvende. Ancak, *ngIf öğenin görüntüleme durumunu kontrol etmediğini, ancak öğeyi şablona ekleyip çıkararak doğrudan gösterip göstermeme etkisini elde ettiğini belirtmek gerekir.
Elbette, bu etkiyi elde etmek için bir öğenin gizli özniteliğine küresel bir stil kullanarak display: none !important gibi bir özellik de ekleyebilirsiniz. Diyebilirsiniz, açısal grup bu sorunları bildiğine göre, neden çerçevedeki gizli sisteme küresel en yüksek öncelikli gizli stil eklememiyorsunuz? Cevap şu ki, küresel stil eklemenin tüm uygulamalar için en iyi seçenek olduğunu garanti edemeyiz. Bu yaklaşım, gizli yerel yeteneklere dayanan işlevselliği bozduğu için, seçimi mühendislere bırakıyoruz.
|
Yayınlandı 22.05.2019 14:02:02
|
|
|
