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.

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

<!-- Using the component -->
<h3>Your profile photo</h3>
<profile-photo />
<button>Upload a new profile photo</button>

<!-- Rendered DOM -->
<h3>Your profile photo</h3>
<profile-photo>
  <img src="profile-photo.jpg" alt="Your profile photo" />
</profile-photo>
<button>Upload a new profile photo</button>

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ı şekilde davranır, ancak @Component dekoratöründe host özelliği ile tanımlanır.

@Component({
  ...,
  host: {
    'role': 'slider',
    '[attr.aria-valuenow]': 'value',
    '[tabIndex]': 'disabled ? -1 : 0',
    '(keydown)': 'updateValue($event)',
  },
})
export class CustomSlider {
  value: number = 0;
  disabled: boolean = false;
  updateValue(event: KeyboardEvent) { /* ... */ }
  /* ... */
}

HostBinding ve @HostListener dekoratörleri #

@HostBinding ve @HostListener dekoratörlerini sınıf üyelerine uygulayarak ana elemana alternatif olarak bağlanabilirsiniz.

@HostBinding, barındırma özelliklerini ve niteliklerini özelliklere ve yöntemlere bağlamanıza olanak tanır:

@Component({
  /* ... */
})
export class CustomSlider {
  @HostBinding('attr.aria-valuenow')
  value: number = 0;
  @HostBinding('tabIndex')
  getTabIndex() {
    return this.disabled ? -1 : 0;
  }
  /* ... */
}

@HostListener, olay dinleyicilerini ana öğeye bağlamanıza olanak tanır. Dekoratör, bir olay adı ve isteğe bağlı bir argüman dizisini kabul eder:

export class CustomSlider {
  @HostListener('keydown', ['$event'])
  updateValue(event: KeyboardEvent) {
    /* ... */
  }
}

Her zaman @HostBinding ve @HostListener yerine host özelliğini kullanmayı tercih edin. Bu dekoratörler yalnızca geriye dönük uyumluluk için mevcuttur.

Bağlantı çarpışmaları #

Bir bileşeni bir şablon içinde kullandığınızda, bu bileşen örneğinin elemanına bağlantılar ekleyebilirsiniz. Bileşen ayrıca aynı özellikler veya öznitelikler için ana bağlantılar tanımlayabilir.

@Component({
  ...,
  host: {
    'role': 'presentation',
    '[id]': 'id',
  }
})
export class ProfilePhoto { /* ... */ }

<profile-photo role="group" [id]="otherId" />

Bu tür durumlarda, hangi değerin kazandığını belirleyen aşağıdaki kurallar geçerlidir:

• Eğer her iki değer de statik ise, örnek bağlama kazanır.
• Eğer bir değer statik ise ve diğeri dinamikse, dinamik değer kazanır.
• Eğer her iki değer de dinamikse, bileşenin ana bağlamı kazanır.