Jika Anda pernah membuat arahan Angular, maka Anda mungkin menggunakan konstruk yang menggunakan tanda kurung sebagai pemilih:
([]) . Pendekatan semacam itu, meskipun paling sering diterapkan, bukan satu-satunya yang mungkin. Faktanya, penyeleksi yang digunakan dalam arahan memberikan kesempatan yang luas bagi programmer untuk kreativitas. Untuk menunjukkan gagasan ini dalam tindakan, materi, terjemahan yang kami terbitkan hari ini, membahas metodologi untuk membuat arahan yang dirancang untuk bekerja dengan tautan eksternal yang ada di templat. Secara khusus, kami akan berbicara tentang bagaimana Anda dapat menemukan elemen HTML biasa, dan, jika perlu, mengecualikan beberapa dari mereka dengan menggunakan
:not pseudo-
:not .
Arahan NgForm
Untuk mempertimbangkan contoh pemilih kompleks, lihat arahan
ngForm :
@Directive({ selector: 'form:not([ngNoForm]):not([formGroup]),ngForm,ng-form,[ngForm]', })
Di sini perlu diperhatikan hal-hal berikut:
- Arahan dapat dirancang untuk beberapa penyeleksi, yang dapat dicantumkan dengan koma.
- Di sini Anda dapat mencampur elemen target HTML (seperti
<form> ) dengan atribut HTML (seperti ngForm ). - Untuk mengecualikan beberapa elemen dari seleksi, Anda dapat menggunakan
:not pseudo- :not .
Membuat arahan untuk bekerja dengan tautan eksternal
Dengan tautan eksternal yang kami maksud adalah tag
<a> , yang tidak memiliki arahan
routerLink . Mempertimbangkan apa yang kami temukan dengan menganalisis contoh sebelumnya, pemilih yang sesuai dapat dijelaskan sebagai berikut:
@Directive({ selector: 'a:not([routerLink])', })
Keindahan pemilih ini adalah bahwa kita tidak perlu membuat nama atribut untuk sesuatu yang dapat digambarkan sebagai kebalikan dari beberapa entitas.
Kita dapat, untuk menyoroti tautan eksternal, menggunakan sesuatu seperti arahan dengan nama
externalLink , tetapi ini sama sekali tidak perlu, karena pendekatan ini diterjemahkan ke dalam duplikasi mekanisme yang ada. Selain itu, mudah untuk lupa menambahkan arahan yang serupa ke beberapa tautan eksternal. Kekuatan metode kami adalah, berkat satu jalur, kami dapat mengakses semua tautan eksternal.
Hasil penerapan arahan ke tautan eksternal akan terlihat seperti ini:
- Tautan harus terbuka di jendela terpisah.
- Atribut
rel harus ditambahkan ke tautan, yang akan meningkatkan kinerja dan meningkatkan keamanan solusi.
Kedua sasaran ini dapat dicapai melalui penggunaan
@HostBinding() :
@Directive({ selector: 'a:not([routerLink])' }) export class ExternalLinkDirective { @HostBinding('rel') @Input() rel = 'noopener'; @HostBinding('target') @Input() target = '_blank'; }
Harap perhatikan bahwa di sini, antara lain, kami menghiasi properti menggunakan dekorator
@Input() , yang, jika perlu, membuka kemungkinan redefinisi.
Implementasi lain yang valid dari solusi semacam itu mungkin menggunakan dekorator
@Attribute() . Pendekatan ini akan memberikan sedikit peningkatan kinerja, karena, tidak seperti dekorator
@Input() , ketika menggunakan
@Attribute() nilai properti terkait hanya dihitung satu kali, yaitu, properti
rel dan
target tidak selalu diperiksa dalam siklus perubahan pemeriksaan.
Detail tentang teknik ini dapat ditemukan di
sini .
Petunjuk Pengujian
Mari kita buat blok navigasi sederhana yang berisi tautan menuju sumber daya eksternal:
<nav> <a href="https://google.com">Google</a> <a href="https://bing.com">Bing</a> <a href="https://forbes.com">Forbes</a> </nav>
Jika, menggunakan alat pengembang Chrome, Anda melihat kode HTML yang sesuai, Anda dapat melihat yang berikut:
Kode HTML dari blok navigasi setelah menerapkan arahanInilah yang kita butuhkan. Arahan berfungsi tanpa perlu penyeleksi atribut tambahan.
Ringkasan
Dari materi ini, Anda belajar bahwa ketika bekerja dengan arahan Angular, tidak perlu menggunakan penyeleksi atribut. Di sini kami pertama kali memeriksa arahan
ngForm , dan kemudian menggunakan pengetahuan yang kami peroleh untuk membuat arahan kami sendiri yang dirancang untuk bekerja dengan tautan eksternal. Kami harap Anda menemukan teknik ini berguna.
Pembaca yang budiman! Jika Anda mengetahui adanya teknik yang tidak jelas untuk mengembangkan proyek web menggunakan Angular, silakan beri tahu kami.
