Özel Yönergeler
Özel Yönergeler Angular'da, HTML elementlerinin davranışlarını genişletmek veya yeniden kullanılabilir işlevsellik eklemek için kullanılan güçlü araçlardır. Komponentlerden farklı olarak, yönergeler kendi şablonlarını oluşturmaz; bunun yerine mevcut elementleri manipüle eder veya onlara ek davranışlar kazandırır. Bu sayede, aynı işlevselliği birden fazla bileşende tekrar kullanmak mümkün olur ve kodun sürdürülebilirliği artar.
Özel yönergeler, stilleri değiştirmek, olayları dinlemek, görünürlüğü kontrol etmek veya özel validasyonlar eklemek gibi görevlerde sıkça kullanılır. Ayrıca, Angular’ın bileşenler, durum yönetimi, veri akışı ve yaşam döngüsü kavramlarıyla uyumlu bir şekilde çalışır. Modern SPA uygulamalarında, bu yönergeler sayesinde kodun yeniden kullanılabilirliği ve ölçeklenebilirliği artırılır.
Bu eğitimde, Angular projelerinde özel yönergelerin nasıl oluşturulacağını, yapılandırılacağını ve optimize edileceğini öğreneceksiniz. Ayrıca prop drilling, gereksiz yeniden renderlar ve durum mutasyonları gibi yaygın hatalardan kaçınmayı öğrenecek, özel yönergeleri gerçek dünya uygulamalarında nasıl kullanacağınızı kavrayacaksınız.
Temel Örnek
typescript// Basit bir hover rengini değiştiren yönerge örneği
import { Directive, ElementRef, HostListener, Input } from '@angular/core';
@Directive({
selector: '[appHoverColor]'
})
export class HoverColorDirective {
@Input() appHoverColor: string = 'yellow';
constructor(private el: ElementRef) {}
@HostListener('mouseenter') onMouseEnter() {
this.highlight(this.appHoverColor);
}
@HostListener('mouseleave') onMouseLeave() {
this.highlight('');
}
private highlight(color: string) {
this.el.nativeElement.style.backgroundColor = color;
}
}
// Komponent kullanımı
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: ` <h2 appHoverColor="lightblue">Bu metnin üzerine gelin</h2> <p appHoverColor="lightgreen">Angular özel yönergeleri güçlüdür.</p>
`
})
export class AppComponent {}Yukarıdaki örnekte HoverColorDirective, DOM manipülasyonunu kapsülleyerek tekrar kullanılabilir bir şekilde sunar. @Directive dekoratörü ile yönerge tanımlanır ve [appHoverColor] selector ile uygulanır. @Input ile dışarıdan renk parametresi alınabilir, böylece veri akışı ve bileşenlerin sorumlulukları korunur.
ElementRef, elemente doğrudan erişim sağlar, @HostListener ile mouse olayları yakalanarak arka plan rengi değiştirilir. Bu yaklaşım, Angular yaşam döngüsü ile uyumlu olup, gereksiz renderlar ve prop drilling sorunlarını önler. Karmaşık SPA’larda bu desen, kodun ölçeklenebilirliğini ve sürdürülebilirliğini artırır.
Pratik Örnek
typescript// Kullanıcı rolüne göre görünürlüğü kontrol eden yapısal yönerge
import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
@Directive({
selector: '[appRoleAccess]'
})
export class RoleAccessDirective {
@Input() set appRoleAccess(roles: string[]) {
const userRole = this.getUserRole();
if (roles.includes(userRole)) {
this.viewContainer.createEmbeddedView(this.templateRef);
} else {
this.viewContainer.clear();
}
}
constructor(
private templateRef: TemplateRef<any>,
private viewContainer: ViewContainerRef
) {}
private getUserRole(): string {
return 'admin'; // örnek rol
}
}
// Komponent kullanımı
import { Component } from '@angular/core';
@Component({
selector: 'app-dashboard',
template: ` <div *appRoleAccess="['admin', 'superuser']"> <h3>Admin Panel</h3> <p>Yalnızca yetkili kullanıcılar görebilir.</p> </div> <div *appRoleAccess="['user']"> <h3>Standart Kullanıcı</h3> </div>
`
})
export class DashboardComponent {}RoleAccessDirective, DOM yapısını koşullu olarak manipüle eden bir yapısal yönergedir. TemplateRef ve ViewContainerRef ile elementleri ekleyip çıkarabilir, bu sayede yetki tabanlı içerik kontrolü sağlanır. Veri akışı tek yönlü kalır ve state yönetimi bozulmaz. Gerçek uygulamalarda, getUserRole() metodunu kullanıcı servisi ile entegre ederek güvenli ve ölçeklenebilir çözümler oluşturabilirsiniz.
Bu yaklaşım, bileşen şablonlarını gereksiz if bloklarıyla karmaşıklaştırmadan kullanıcı erişim kontrolü sağlar. Ayrıca Angular’ın render döngüsü ve durum yönetimi ile uyumludur, performansı optimize eder ve kodu sürdürülebilir kılar.
Angular’da özel yönergelerde en iyi uygulamalar, tek sorumluluk prensibine uymak, bağımlılıkları constructor ile enjekte etmek ve DOM manipülasyonlarını güvenli şekilde yapmak üzerine kuruludur. Yaygın hatalar arasında prop drilling, durum mutasyonları ve gereksiz renderlar yer alır.
Debugging için Angular DevTools veya Augury gibi araçlar kullanılabilir. Performans için Renderer2 ile DOM erişimi yapılmalı, event subscription’lar ngOnDestroy ile temizlenmelidir. Güvenlik açısından innerHTML gibi direkt DOM manipülasyonlarından kaçınılmalı ve yetkilendirme kontrolleri merkezi servislerle sağlanmalıdır. Bu yöntemler, özel yönergelerin güvenli, sürdürülebilir ve yüksek performanslı olmasını sağlar.
📊 Referans Tablosu
| Angular Element/Concept | Description | Usage Example |
|---|---|---|
| @Directive | Özel yönerge oluşturur | @Directive({ selector: '[appHighlight]' }) |
| @HostListener | Host elementin eventlerini dinler | @HostListener('click') onClick() { ... } |
| @Input | Bileşenden veri alır | @Input() color: string; |
| TemplateRef | Yapısal yönergelerde şablon referansı | constructor(private tpl: TemplateRef<any>) {} |
| ViewContainerRef | Vizyonu dinamik olarak ekler veya siler | this.viewContainer.createEmbeddedView(this.tpl); |
| Renderer2 | Güvenli DOM manipülasyonu | this.renderer.setStyle(el.nativeElement, 'color', 'blue'); |
Özetle, Özel Yönergeler Angular’da yeniden kullanılabilir, dinamik ve etkileşimli arayüzler geliştirmek için temel araçlardır. Yönergeler, bileşenlerin sorumluluklarını artırmadan DOM manipülasyonu ve davranış eklemeye olanak tanır.
Bu konuyu öğrenmek, yaşam döngüsü, durum yönetimi ve performans optimizasyonu gibi Angular kavramlarında derinleşmeyi sağlar. Sonraki adımlar olarak Dependency Injection, İleri Seviye Yapısal Yönergeler ve Change Detection Strategy konularını çalışmak önerilir. Özel yönergelerin kullanımı, büyük ölçekli SPAlarda kodun sürdürülebilirliğini ve yeniden kullanılabilirliğini artırı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