HostListener ve HostBinding özellik dekoratörlerine geçmeden önce, host öğesine bir göz atalım.
Ana eleman kavramı hem komutlar hem de bileşenler için geçerlidir. Talimatlar için kavram oldukça basittir. Komutu uygulayan eleman ana elemandır. Diyelim ki bir HighlightDirective direktifi ilan ettik (seçici: '[exeHighlight]'):
Yukarıdaki HTML kodunda, p elemanı ana elemandır. Eğer direktif özel bir bileşene uygulanırsa, örneğin:
Bu durumda, exe-sayac özel elemanı ana elemandır.
HostListener, ev sahibi öğelerine etkinlik dinleme eklemesini sağlayan bir mülk dekoratörüdür.
Angular'da, elemanların özellik bağlanmasını uygulamak için HostBinding dekoratörü kullanabiliriz.
Bu direktif, kullanıcı tıklama olaylarını dinlemek için HostListener dekoratörü nasıl kullanılacağını gösterir
Ayrıca, ana öğe dışındaki nesneler tarafından üretilen pencere, belge veya gövde gibi olayları da dinleyebiliriz
Hedef pencere, belge veya gövde olabilir
@HostBinding() ve @HostListener() talimatları özelleştirmede faydalıdır. @HostBinding() komutun ana öğesine sınıflar, stiller, nitelikler vb. ekleyebilirken, @HostListener() ana elemandaki olayları dinleyebilir.
Örnek: Yazı yazısı ve kenar rengini gerçek zamanlı olarak değiştiren bir font ve kenar rengi uygulayın
Yukarıdaki kodun ana kısmından bahsedelim:
(1): Komutumuzu Rainbow adıyla adlandırın
(2): Göstermemiz gereken tüm olası renkleri tanımlayın
(3): Renk ve sınırı tanımlayın ve süsleyinRenk ile @HostBinding() ile şekillendirin
(4): @HostListener() kullanarak ana elemanın tuş etkisini dinleyin ve renkleri rastgele color ile borderColor olarak atayın
Sayfada bu komutu kullanın:
Etki şöyledir:
|
Yayınlandı 26.06.2019 14:42:08
|
|
|
|
