Bir bileşenin anatomisi

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

• Kullanıcı girdisini işleme ve sunucudan veri getirme gibi davranışlara sahip bir TypeScript sınıfı
• DOM'a neyin render edileceğini kontrol eden bir HTML şablonu
• Bileşenin HTML'de nasıl kullanılacağını tanımlayan bir CSS seçici

TypeScript sınıfının üzerine bir @Component dekoratörü ekleyerek Angular'a özgü bilgileri sağlarsınız:

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

Veri bağlama, olay işleme ve kontrol akışı dahil olmak üzere Angular şablonları yazma hakkında tüm ayrıntılar için Şablonlar rehberi'ne bakın.

@Component dekoratörüne iletilen nesne, bileşenin meta verisi olarak adlandırılır. Bu, selector, template ve bu rehber boyunca açıklanan diğer özellikleri içerir.

Bileşenlerin isteğe bağlı olarak o bileşenin DOM'una uygulanan CSS stilleri listesi içerebilir:

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

Varsayılan olarak, bir bileşenin stilleri yalnızca o bileşenin şablonunda tanımlanan elemanları etkiler. Angular'ın stillendirme yaklaşımı hakkında ayrıntılar için Bileşen Stillendirme belgesine bakın.

Alternatif olarak şablon ve stillerinizi ayrı dosyalarda yazmayı seçebilirsiniz:

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

Bu, projenizdeki sunum ve davranış kaygılarını ayırmaya yardımcı olabilir. Tüm projeniz için tek bir yaklaşım seçebilir veya her bileşen için hangisini kullanacağınıza karar verebilirsiniz.

Hem templateUrl hem de styleUrl, bileşenin bulunduğu dizine göredir.

Bileşenleri kullanma

@Component dekoratöründe import'lar

Bir bileşen, direktif veya pipe kullanmak için, onu @Component dekoratöründeki imports dizisine eklemeniz gerekir:

import {ProfilePhoto} from './profile-photo';

@Component({
  // Bu bileşenin şablonunda kullanmak için
  // `ProfilePhoto` bileşenini import edin.
  imports: [ProfilePhoto],
  /* ... */
})
export class UserProfile {}

Varsayılan olarak, Angular bileşenleri bağımsızdır (standalone), yani onları doğrudan diğer bileşenlerin imports dizisine ekleyebilirsiniz. Angular'ın daha eski bir sürümü ile oluşturulan bileşenlerde bunun yerine @Component dekoratöründe standalone: false belirtilebilir. Bu bileşenlerde, bileşenin tanımlandığı NgModule'u içerir (import edersiniz). Ayrıntılar için tam NgModule rehberi'ne bakın.

Bir şablonda bileşenleri gösterme

Her bileşen bir CSS seçici tanımlar:

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

Angular'ın hangi seçici türlerini desteklediği ve seçici seçme rehberliği hakkında ayrıntılar için Bileşen Seçicileri belgesine bakın.

Diğer bileşenlerin şablonunda eşleşen bir HTML elemanı oluşturarak bir bileşeni gösterirsiniz:

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

@Component({
  imports: [ProfilePhoto],
  template: `<profile-photo />`,
})
export class UserProfile {}

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

Bir bileşen tarafından render edilen, o bileşenin şablonuna karşılık gelen DOM, o bileşenin görünümü (view) olarak adlandırılır.

Bileşenleri bu şekilde birleştirirken, Angular uygulamanızı bir bileşen ağacı olarak düşünebilirsiniz.

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