Öznitelik Yönergeler
Öznitelik yönergeler (Attribute Directives) Angular'da, DOM elementlerinin davranışını ve görünümünü dinamik olarak değiştirmek için kullanılan güçlü araçlardır. Modern tek sayfa uygulamalarında (SPA) kullanıcı deneyimini geliştirmek, etkileşimli ve modüler arayüzler oluşturmak için kritik öneme sahiptirler. Bu yönergeler, bir elementin stilini değiştirmek, CSS sınıfları eklemek veya kaldırmak, veya element özelliklerini bileşenin durumuna, kullanıcı girdisine veya harici verilere bağlı olarak güncellemek gibi işlemleri kolaylaştırır.
Angular geliştirmede öznitelik yönergeleri, declarative bir şekilde DOM üzerinde değişiklikler uygulamanıza olanak tanır. Örneğin, bir liste öğesini vurgulamak, form alanlarını dinamik olarak işaretlemek veya kullanıcı etkileşimlerine tepki vermek gibi görevler için idealdir. Bu yönergeler, Angular'ın temel kavramları olan components, state management, data flow ve lifecycle hooks ile entegre çalışır ve uygulamaların sürdürülebilir ve ölçeklenebilir olmasını sağlar.
Bu eğitimde, öznitelik yönergeler oluşturmayı, @Input ile veri almayı, HostListener kullanarak kullanıcı olaylarını yakalamayı ve performans optimizasyon tekniklerini öğreneceksiniz. Ayrıca, prop drilling, gereksiz re-render ve durum mutasyonları gibi yaygın hatalardan nasıl kaçınacağınızı göreceksiniz. Bu bilgilerle, Angular projelerinde etkili ve yeniden kullanılabilir öznitelik yönergeleri geliştirebileceksiniz.
Temel Örnek
typescriptimport { Directive, ElementRef, Renderer2, HostListener, Input } from '@angular/core';
@Directive({
selector: '[appHighlight]'
})
export class HighlightDirective {
@Input() highlightColor: string = 'yellow';
constructor(private el: ElementRef, private renderer: Renderer2) {}
@HostListener('mouseenter') onMouseEnter() {
this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', this.highlightColor);
}
@HostListener('mouseleave') onMouseLeave() {
this.renderer.removeStyle(this.el.nativeElement, 'backgroundColor');
}
}Bu örnek, fare üzerine gelindiğinde bir elementin arka plan rengini değiştiren basit bir öznitelik yönergesini göstermektedir. @Directive dekoratörü yönergeyi tanımlar ve selector ile template üzerinde kullanılabilir hale getirir. @Input highlightColor, yöneticinin üst bileşenden renk bilgisini almasını sağlar ve yönergeyi esnek ve yeniden kullanılabilir kılar.
HostListener, mouseenter ve mouseleave olaylarını dinleyerek arka plan rengini uygular veya kaldırır. Renderer2 kullanımı, DOM manipülasyonlarının güvenli ve Angular’ın change detection mekanizması ile uyumlu olmasını sağlar. Bu yaklaşım, prop drilling ve gereksiz yeniden render işlemlerini önler, mantığı bileşenden ayırarak sürdürülebilirliği artırır.
Pratik Örnek
typescriptimport { Directive, ElementRef, Renderer2, HostListener, Input, OnChanges, SimpleChanges } from '@angular/core';
@Directive({
selector: '[appDynamicHighlight]'
})
export class DynamicHighlightDirective implements OnChanges {
@Input() appDynamicHighlight: string = 'lightblue';
constructor(private el: ElementRef, private renderer: Renderer2) {}
ngOnChanges(changes: SimpleChanges) {
if (changes['appDynamicHighlight']) {
this.updateBackgroundColor(this.appDynamicHighlight);
}
}
@HostListener('mouseenter') onMouseEnter() {
this.updateBackgroundColor(this.appDynamicHighlight);
}
@HostListener('mouseleave') onMouseLeave() {
this.updateBackgroundColor('');
}
private updateBackgroundColor(color: string) {
this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', color);
}
}Bu gelişmiş örnek, giriş özelliklerindeki değişikliklere tepki veren dinamik bir arka plan rengi uygulaması göstermektedir. ngOnChanges lifecycle hook’u, appDynamicHighlight değiştiğinde DOM stilini günceller. updateBackgroundColor metodu, tekrar eden kodu önler ve DRY (Don't Repeat Yourself) ilkesine uygun olarak yönetimi merkezileştirir.
HostListener, kullanıcı etkileşimlerini yönetirken Renderer2, DOM değişikliklerinin güvenli ve Angular ile uyumlu olmasını sağlar. Bu yaklaşım, temalar veya form doğrulama durumları gibi dinamik senaryolarda, modüler, yeniden kullanılabilir ve yüksek performanslı yönergeler geliştirmeye uygundur.
Öznitelik yönergeler için en iyi uygulamalar; mantığı template’den ayırmak, DOM manipülasyonları için Renderer2 kullanmak ve lifecycle hook’ları etkin şekilde kullanmaktır. Yaygın hatalardan kaçınmak; prop drilling, gereksiz re-render ve doğrudan durum değişikliklerinden sakınmayı içerir. Performans optimizasyonu için yüksek frekanslı olaylarda ağır işlemlerden kaçınmak ve dinamik içerik manipülasyonlarında güvenliği sağlamak önemlidir. Angular DevTools, performans ve hata ayıklama süreçlerini kolaylaştırır.
📊 Referans Tablosu
| Angular Element/Concept | Description | Usage Example |
|---|---|---|
| @Directive | Öznitelik yönergesini tanımlar | @Directive({selector: '[appHighlight]'}) |
| @Input | Üst bileşenden veri alır | @Input() highlightColor: string |
| HostListener | DOM olaylarını dinler | @HostListener('mouseenter') onMouseEnter() |
| Renderer2 | DOM’u güvenli şekilde manipüle eder | this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'yellow') |
| OnChanges | Giriş değişikliklerini algılar | ngOnChanges(changes: SimpleChanges) |
Öznitelik yönergeleri öğrenmek, etkileşimli ve yeniden kullanılabilir Angular bileşenleri oluşturmayı sağlar. Bunları state management, data flow ve lifecycle hooks ile entegre ederek sürdürülebilir ve yüksek performanslı uygulamalar geliştirebilirsiniz. Sonraki adımlar olarak yapılandırılmış yönergeler, birden fazla yönerge kombinasyonu ve servis entegrasyonlarını incelemek faydalıdır. Pratik uygulamalar ve resmi Angular dokümantasyonu, bu konuda derinlemesine bilgi edinmek için ideal kaynaklardır.
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek