hostDirectives Özelliği
Yönergeleri bir bileşen konağına ekleyin
hostDirectives Özelliği, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Angular Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Angular Academy kursu toplamda 4 dersten oluşur.
Yönerge Birleştirme API'si
Yönerge Birleştirme API'si, bir bileşenin veya yönergenin hostDirectives özelliği aracılığıyla diğer yönergeleri kendi ana öğesine bildirimsel olarak uygulamasını sağlar. Bu, kalıtım olmadan yeniden kullanımı mümkün kılar.
Çözdüğü Sorun
Daha önce yönerge davranışını yeniden kullanmak için ya yönergeyi her şablonda tekrarlamanız ya da kalıtım kullanmanız gerekiyordu. hostDirectives, davranışları doğrudan ana öğeye birleştirir.
Temel Söz Dizimi
Yönergeleri, bileşen meta verilerindeki hostDirectives dizisinde listeleyin.
@Component({
selector: 'app-menu',
hostDirectives: [CdkTrapFocus],
template: '<ng-content></ng-content>'
})
export class MenuComponent {}Ne Olur?
Angular, CdkTrapFocus yönergesini her app-menu ana öğesine otomatik olarak uygular. Kullanıcılar, yönergeyi kendileri eklemeden bu davranışı hazır olarak elde eder.
Gereksinimler
Ana yönergeler standalone olmalıdır. Yönergenin seçicisine değil, doğrudan yönerge sınıfına başvurursunuz.
Birden Çok Ana Yönerge
Birden çok davranışı hepsini listeleyerek birleştirin.
hostDirectives: [
HighlightDirective,
TooltipDirective,
CdkTrapFocus
]Bir Yönergeye Uygulama
Bir yönergenin de ana yönergeleri olabilir; böylece katmanlı ve birleştirilebilir davranışlar oluşturabilirsiniz.
@Directive({
selector: '[appCard]',
hostDirectives: [HoverElevateDirective]
})
export class CardDirective {}Yaşam Döngüsü Sırası
Ana yönergeler, ana öğenin kendi oluşturucu mantığından önce örneklenir; bu nedenle ana öğe başlatıldığında kurulumları kullanılabilir durumdadır.
Bağımlılık Enjeksiyonu
Ana yönergeler, öğe enjektörü aracılığıyla ana öğeye (ve tersi yönde) enjekte edilebilir; bu da birleştirilmiş davranışlar arasında koordinasyon sağlar.
private trap = inject(CdkTrapFocus);Şablon Değişikliği Gerekmez
Temel avantaj şudur: app-menu kullanıcılarının CdkTrapFocus hakkında bilgi sahibi olması gerekmez. Davranış, bileşen tanımının içinde kapsüllenmiştir.
Ne Zaman Kullanılmalı?
Odak tuzağı, dalgalanma efekti ve analiz gibi ortak davranışları bileşenlere veya yönergelere temiz ve yeniden kullanılabilir biçimde eklemek için hostDirectives kullanın.
Hızlı Kontrol
hostDirectives kavramını anlayıp anlamadığınızı test edin.
Özet
hostDirectives özelliğinin bağımsız yönergeleri bir bileşenin veya yönergenin ana öğesine otomatik olarak uyguladığını; bunun da şablon veya kalıtım kullanmadan, birleştirme yoluyla davranışların yeniden kullanılmasını sağladığını öğrendiniz.
Sıkça Sorulan Sorular
“hostDirectives Özelliği” dersi ücretsiz mi?
Evet — “hostDirectives Özelliği” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Angular Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Angular Academy kursu toplamda 4 dersten oluşur.
“hostDirectives Özelliği” dersinde ne öğreneceğim?
Yönergeleri bir bileşen konağına ekleyin Angular Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Angular Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Angular Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.
“hostDirectives Özelliği” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Angular Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Angular Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- hostDirectives Özelliği
- Girdileri ve Çıktıları Dışa Açma
- Yeniden Kullanılabilir Davranışlar Oluşturma
- Birleştirme ve Kalıtım Karşılaştırması