Di AngularJS 1, jika Anda ingin mengalihkan status tampilan elemen DOM, Anda mungkin akan menggunakan perintah bawaan di AngularJS 1, seperti ng-show atau ng-hide:
Contoh AngularJS 1:
Di angular2, sintaks templat baru memungkinkan Anda mengikat ekspresi ke properti asli elemen DOM apa pun. Fitur yang benar-benar luar biasa ini membuka kemungkinan tak terbatas. Salah satunya adalah mengikat ekspresi ke properti tersembunyi asli, yang sedikit seperti ng-show, dan juga mengatur display: none untuk elemen:
[tersembunyi] Contoh Angular2 (tidak disarankan):
Sekilas, contoh di atas tampaknya adalah ng-show di AngularJS 1. Faktanya, mereka sudah! perbedaan penting.
Baik ng-show dan ng-hide mengontrol status tampilan elemen DOM melalui kelas CSS yang disebut ng-hide, yang hanya mengatur elemen untuk menampilkan: none. Kuncinya di sini adalah AngularJS 1 telah ditambahkan ke kelas ng-hide! penting, yang menyesuaikan prioritas kelas sehingga dapat mengganti penetapan atribut tampilan elemen dari gaya lain.
Kembali ke contoh ini, gaya display: none pada atribut tersembunyi asli diimplementasikan oleh browser. Sebagian besar browser tidak menggunakannya! penting untuk menyesuaikan prioritasnya. Oleh karena itu, mengontrol status tampilan elemen dengan menggunakan [hidden]="expression" dapat dengan mudah ditimpa secara tidak sengaja oleh gaya lain. Misalnya: jika saya menulis gaya seperti itu untuk elemen ini di tempat lain, display: flex, ini lebih diutamakan daripada properti tersembunyi asli (lihat di sini).
Untuk alasan ini, kita biasanya menggunakan *ngIf untuk mengalihkan status kehadiran elemen untuk mencapai tujuan yang sama:
*ngIf contoh angular2 (disarankan):
Tidak seperti properti tersembunyi asli, *ngIf di angular2 tidak dibatasi gaya. Tidak peduli jenis CSS apa yang Anda tulis, dia aman. Namun, masih perlu disebutkan bahwa *ngIf tidak mengontrol status tampilan elemen, tetapi secara langsung mencapai efek menampilkan atau tidak dengan menambahkan/menghapus elemen dari templat.
Tentu saja, Anda juga dapat menambahkan prioritas tersembunyi ke atribut tersembunyi suatu elemen dengan menggunakan gaya global, seperti display: none !important, untuk mencapai efek ini. Anda mungkin bertanya, karena kelompok sudut mengetahui masalah ini, mengapa tidak menambahkan gaya tersembunyi prioritas tertinggi global ke yang tersembunyi dalam kerangka? Jawabannya adalah kami tidak dapat menjamin bahwa menambahkan gaya global adalah pilihan terbaik untuk semua aplikasi. Karena pendekatan ini benar-benar merusak fungsionalitas yang mengandalkan kemampuan tersembunyi asli, kami menyerahkan pilihan kepada para insinyur.
|
Diposting pada 22/05/2019 14.02.02
|
|
|
