Bir Componentin Anatomisi

İpucu: Bu kılavuz, Temel Bilgiler Kılavuzu’nu zaten okuduğunuzu varsayar. Angular’da yeniyseniz önce onu okuyun.

Her bileşen şunlara sahip olmalıdır:

• Bir TypeScript sınıfı, kullanıcı girişini işleme ve sunucudan veri almayı gibi davranışlar içerir.
• Bir HTML şablonu, DOM’a neyin yansıdığını kontrol eder.
• Bir CSS selector, bileşenin HTML’de nasıl kullanıldığını tanımlar.

Bir bileşen için Angular özgü bilgiler sağlamak için, TypeScript sınıfının üstüne @Component  decorator ekleyerek yapılır:

@Component({
  selector: 'profile-photo',
  template: `<img src="profile-photo.jpg" alt="Your profile photo">`,
})
export class ProfilePhoto { }

Angular şablonları yazmayla ilgili tüm ayrıntılar için Şablonlar kılavuzuna bakın.

@Component dekoratörüne aktarılan nesneye bileşenin meta verileri denir. Bu, bu kılavuz boyunca açıklanan selector, template ve diğer özellikleri içerir.

Bileşenler isteğe bağlı olarak, bileşenin DOM’una uygulanan CSS stillerinin bir listesini içerebilir.

@Component({
  selector: 'profile-photo',
  template: `<img src="profile-photo.jpg" alt="Your profile photo">`,
  styles: `img { border-radius: 50%; }`,
})
export class ProfilePhoto { }

Bir bileşenin stilleri varsayılan olarak yalnızca o bileşenin şablonunda tanımlanan öğeleri etkiler. Angular’ın stil uygulama yaklaşımı hakkında ayrıntılı bilgi için Bileşenleri Biçimlendirme bölümüne bakın.

Şablonunuzu ve stillerinizi ayrı dosyalarda yazmayı tercih edebilirsiniz:

@Component({
  selector: 'profile-photo',
  templateUrl: 'profile-photo.html',
  styleUrl: 'profile-photo.css',
})
export class ProfilePhoto { }

Bu proje içinde sunumla ilgili endişeleri davranıştan ayırmaya yardımcı olabilir. Tüm projeniz için bir yaklaşım seçebilir veya her bileşen için hangisini kullanacağınıza karar verebilirsiniz.

Her iki templateUrl ve styleUrl bileşenin bulunduğu dizine göre göreli konumdadır.

Components kullanma #

Her bileşen bir CSS seçicisi tanımlar.

@Component({
  selector: 'profile-photo',
  ...
})
export class ProfilePhoto { }

Angular’ın hangi tür seçicileri desteklediği ve bir seçici seçerken rehberlik için Bileşen Seçicileri bölümüne bakın.

Bir bileşeni, diğer bileşenlerin şablonunda eşleşen bir HTML öğesi oluşturarak kullanırsınız:

@Component({
  selector: 'user-profile',
  template: `
    <profile-photo />
    <button>Upload a new profile photo</button>`,
  ...,
})
export class UserProfile { }

“Şablonunuzda diğer bileşenleri nasıl referans alacağınızı ve kullanacağınızı ayrıntılar için Bileşenleri İçe Aktarma ve Kullanma bölümüne bakın.”

Angular, karşılaştığı her eşleşen HTML öğesi için bileşenin bir örneğini oluşturur. Bileşenin seçicisiyle eşleşen DOM öğesi, o bileşenin ana öğesi olarak adlandırılır. Bileşen şablonunun içeriği, ana öğesinin içine render edilir.

Bir bileşen tarafından oluşturulan DOM, o bileşenin şablonuna karşılık gelen, o bileşenin görünümü olarak adlandırılır.

Bu şekilde bileşenleri bir araya getirirken, Angular uygulamanızı bir bileşen ağacı olarak düşünebilirsiniz.

Bu ağaç yapısı, bağımlılık enjeksiyonu ve alt sorgular da dahil olmak üzere birçok Angular konseptini anlamak için önemlidir.