Template Statements

Şablon deyimleri, kullanıcı olaylarına yanıt vermek için HTML’nizde kullanabileceğiniz yöntemler veya özelliklerdir. Şablon deyimleri ile uygulamanız, dinamik içerik görüntüleme veya form gönderme gibi eylemler aracılığıyla kullanıcılarla etkileşim kurabilir. Aşağıdaki örnekte, deleteHero() şablon ifadesi (event)=”statement” ifadesinde olduğu gibi eşittir işareti = karakterinin sağında tırnak içinde görünür. Kullanıcı Delete hero düğmesine tıkladığında, Angular bileşen sınıfındaki deleteHero() yöntemini […]

Text Interpolation

Değerleri interpolation ile görüntüleme Interpolation, ifadelerin işaretlenmiş metne gömülmesi anlamına gelir. Varsayılan olarak, interpolation sınırlayıcı olarak {{ ve }} çift küme parantezlerini kullanır. Interpolation yapısının nasıl çalıştığını göstermek için currentCustomer değişkenini içeren bir Angular bileşeni düşünün: Bu değişkenin değerini ilgili bileşen şablonunda görüntülemek için interpolation kullanın: Angular, currentCustomer öğesini ilgili bileşen özelliğinin dize değeriyle değiştirir. […]

Genel Bakış

Angular’da şablon bir HTML yığınıdır. Angular’ın birçok özelliğini geliştirmek için bir şablon içinde özel sözdizimi kullanın. Uygulamanızdaki her bir Angular şablonu, tarayıcının görüntülediği sayfanın bir parçası olarak eklenecek bir HTML bölümüdür. Bir Angular HTML şablonu, tıpkı normal HTML gibi, ancak çok daha fazla işlevsellik ile tarayıcıda bir görünüm veya kullanıcı arayüzü oluşturur. Angular CLI ile […]

Gelişmiş Bileşen Yapılandırması

ChangeDetectionStrategy @Component dekoratörü, bileşenin değişiklik algılama modunu kontrol eden bir changeDetection seçeneğini kabul eder. İki değişiklik algılama modu seçeneği vardır. ChangeDetectionStrategy.Default, şaşırtıcı olmayan bir şekilde varsayılan stratejidir. Bu modda Angular, uygulama genelinde herhangi bir etkinlik gerçekleştiğinde bileşenin DOM’unun güncellenmesi gerekip gerekmediğini kontrol eder. Bu kontrolü tetikleyen etkinlikler arasında kullanıcı etkileşimi, ağ yanıtı, zamanlayıcılar ve daha […]

Bileşenleri Programlı Olarak Oluşturma

Bir bileşeni doğrudan bir şablonda kullanmanın yanı sıra, bileşenleri dinamik olarak da oluşturabilirsiniz. Bir bileşeni dinamik olarak oluşturmanın iki ana yolu vardır: NgComponentOutlet ile bir şablonda veya ViewContainerRef ile TypeScript kodunda. NgComponentOutlet Kullanımı NgComponentOutlet, bir şablonda belirli bir bileşeni dinamik olarak işleyen yapısal bir yönergedir. Yönergenin yetenekleri hakkında daha fazla bilgi için NgComponentOutlet API reference […]

Inheritance

Angular bileşenleri TypeScript sınıflarıdır ve standart JavaScript inheritance semantiğine katılırlar. Bir bileşen herhangi bir temel sınıfı genişletebilir: Diğer bileşenleri ve yönergeleri genişletme Bir bileşen başka bir bileşeni veya yönergeyi genişlettiğinde, temel sınıfın dekoratöründe ve temel sınıfın dekore edilmiş üyelerinde tanımlanan tüm meta verileri devralır. Buna seçici, şablon, stiller, ana bilgisayar bağları, girdiler, çıktılar, yaşam döngüsü […]

DOM API’lerini Kullanma

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: 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. […]

Sorgularla Bileşen Alt Öğelerine Başvurma

Bir bileşen, alt öğeleri bulan ve enjektörlerinden değerleri okuyan sorgular tanımlayabilir. Geliştiriciler sorguları en çok alt bileşenlere, yönergelere, DOM öğelerine ve daha fazlasına referans almak için kullanır. İki sorgu kategorisi vardır: görünüm sorguları ve içerik sorguları. Görünüm Sorguları Görünüm sorguları, bileşenin görünümündeki öğelerden (bileşenin kendi şablonunda tanımlanan öğeler) sonuçları alır. Tek bir sonuç için @ViewChild […]

Component Yaşam Döngüsü

Bir component yaşam döngüsü, bileşenin oluşturulması ve yok edilmesi arasında gerçekleşen adımlar dizisidir. Her adım, Angular’ın componentleri nasıl renderladığı ve zamanla güncellemelerini kontrol ettiği sürecin farklı bir bölümünü temsil eder. Bileşenlerinizde, bu adımlar sırasında kod çalıştırmak için lifecycle hook uygulayabilirsiniz. Belirli bir bileşen örneğiyle ilgili olan lifecycle hook, bileşen sınıfınızda yöntemler olarak uygulanır. Angular uygulamasını […]

Component Ana Öğeleri

Angular, bileşenin seçicisine eşleşen her HTML öğesi için bir bileşen örneği oluşturur. Bileşenin seçicisine eşleşen DOM öğesi, o bileşenin ana öğesidir. Bir bileşenin şablonunun içeriği, ana öğesinin içine render edilir. Yukarıdaki örnekte <profile-photo>, ProfilePhoto bileşeninin ana öğesidir. Ana öğeye bağlama Bir bileşen, özellikleri, nitelikleri ve olayları ana öğesine bağlayabilir. Bu, bileşen şablonundaki öğelerdeki bağlantılarla aynı […]