Angular, DOM oluşturma, güncelleme ve kaldırma işlemlerinin çoğunu sizin için gerçekleştirir. Ancak, nadiren bir bileşenin DOM’u ile doğrudan etkileşime girmeniz gerekebilir. Bileşenler, bileşenin ana öğesine bir referans almak için ElementRef’i enjekte edebilir:
@Component({...})
export class ProfilePhoto {
constructor(elementRef: ElementRef) {
console.log(elementRef.nativeElement);
}
}nativeElement özelliği ana Element örneğini referans alır.
Angular’ın afterRender ve afterNextRender işlevlerini, Angular sayfayı oluşturmayı bitirdiğinde çalışan bir oluşturma geri çağrısı kaydetmek için kullanabilirsiniz.
@Component({...})
export class ProfilePhoto {
constructor(elementRef: ElementRef) {
afterRender(() => {
// Focus the first input element in this component.
elementRef.nativeElement.querySelector('input')?.focus();
});
}
}afterRender ve afterNextRender bir injection context, tipik olarak bir bileşenin kurucusunda çağrılmalıdır.
Mümkün olduğunca doğrudan DOM manipülasyonundan kaçının. Her zaman DOM yapınızı bileşen şablonlarında ifade etmeyi ve bu DOM’u bağlamalarla güncellemeyi tercih edin.
Render callback’leri sunucu tarafı render veya derleme zamanı ön render sırasında asla çalışmaz.
DOM’u asla diğer Angular lifecycle hook içinde doğrudan manipüle etmeyin. Angular, bir bileşenin DOM’unun render callback’leri dışında herhangi bir noktada tamamen render edilmiş olduğunu garanti etmez. Ayrıca, diğer lifecycle hook sırasında DOM’un okunması veya değiştirilmesi, layout thrashing neden olarak sayfa performansını olumsuz etkileyebilir.
Bir bileşenin render edicisini kullanma #
Bileşenler, diğer Angular özelliklerine bağlı olan belirli DOM manipülasyonlarını gerçekleştirmek için bir Renderer2 örneği enjekte edebilir.
Bir bileşenin Renderer2‘ı tarafından oluşturulan tüm DOM öğeleri, o bileşenin style encapsulation katılır.
Bazı Renderer2 API’leri de Angular’ın animasyon sistemine bağlanır. Sentetik animasyon özelliklerini güncellemek için setProperty yöntemini ve sentetik animasyon olayları için olay dinleyicileri eklemek için listen yöntemini kullanabilirsiniz. Ayrıntılar için Animations kılavuzuna bakın.
Bu iki dar kullanım durumunun dışında, Renderer2 ve yerel DOM API’lerini kullanmak arasında hiçbir fark yoktur. Renderer2 API’leri, sunucu tarafı oluşturma veya derleme zamanı öncesi oluşturma bağlamlarında DOM manipülasyonunu desteklemez.
DOM API’lerini ne zaman kullanmalıyız? #
Angular çoğu render sorununu hallederken, bazı davranışlar hala DOM API’lerini kullanmayı gerektirebilir. Bazı yaygın kullanım durumları şunlardır:
- Eleman odağını yönetme
- getBoundingClientRect ile olduğu gibi eleman geometrisini ölçme
- Bir öğenin metin içeriğini okuma
MutationObserver,ResizeObserverveyaIntersectionObservergibi yerel gözlemcileri ayarlama
DOM öğelerini eklemekten, kaldırmaktan ve değiştirmekten kaçının. Özellikle, bir öğenin innerHTML özelliğini asla doğrudan ayarlamayın; bu, uygulamanızı cross-site scripting (XSS) exploits karşı savunmasız hale getirebilir. Angular’ın innerHTML bağları da dahil olmak üzere şablon bağları, XSS saldırılarına karşı korumaya yardımcı olan güvenlik önlemleri içerir. Ayrıntılar için Security guide sayfasına bakın.
