İki Yönlü Bağlama

İki yönlü bağlama, uygulamanızdaki bileşenlere veri paylaşımı için bir yol sunar. Olayları dinlemek ve üst ve alt bileşenler arasında eş zamanlı olarak değerleri güncellemek için iki yönlü bağlamayı kullanın.

İki yönlü bağlama,  property binding ile olay bağlamayı birleştirir:

İki yönlü veri bağlama ekleme #

Angular’ın iki yönlü bağlama sözdizimi, köşeli parantezler ve parantezlerin bir kombinasyonudur, [()]. (()] sözdizimi, özellik bağlamanın parantezleri olan [] ile olay bağlamanın parantezleri olan ()‘i aşağıdaki gibi birleştirir.

<app-sizer [(size)]="fontSizePx"></app-sizer>

İki yönlü bağlama nasıl çalışır? #

İki yönlü veri bağlamanın çalışması için, @Output() özelliği inputChange kalıbını kullanmalıdır; burada input, @Input() özelliğinin adıdır. Örneğin, @Input() özelliği size ise, @Output() özelliği sizeChange olmalıdır.

Aşağıdaki sizerComponent bir size değeri özelliğine ve bir sizeChange olayına sahiptir. size özelliği bir @Input() özelliğidir, böylece veriler sizerComponent‘e akabilir. sizeChange olayı bir @Output() olup verilerin sizerComponent‘ten ana bileşene akmasını sağlar.

Ardından, yazı tipi boyutunu azaltmak için dec() ve yazı tipi boyutunu artırmak için inc() olmak üzere iki yöntem vardır. Bu iki yöntem, size özelliğinin değerini min/maks değer kısıtlamaları dahilinde değiştirmek ve yeni size değerini ileten bir olay yaymak için resize() yöntemini kullanır.

export class SizerComponent {
  @Input() size!: number | string;
  @Output() sizeChange = new EventEmitter<number>();
  dec() {
    this.resize(-1);
  }
  inc() {
    this.resize(+1);
  }
  resize(delta: number) {
    this.size = Math.min(40, Math.max(8, +this.size + delta));
    this.sizeChange.emit(this.size);
  }
}

SizerComponent şablonunda, her biri tıklama olayını inc() ve dec() yöntemlerine bağlayan iki düğme bulunur. Kullanıcı düğmelerden birine tıkladığında, sizerComponent ilgili yöntemi çağırır. Her iki yöntem de, inc() ve dec(), resize() yöntemini +1 veya -1 ile çağırır ve bu da sizeChange olayını yeni boyut değeriyle yükseltir.

<div>
  <button type="button" (click)="dec()" title="smaller">-</button>
  <button type="button" (click)="inc()" title="bigger">+</button>
  <span [style.font-size.px]="size">FontSize: {{size}}px</span>
</div>

AppComponent şablonunda fontSizePx, SizerComponent’e iki yönlü olarak bağlanır.

<app-sizer [(size)]="fontSizePx"></app-sizer>
  <div [style.font-size.px]="fontSizePx">Resizable Text</div>

AppComponent‘te, fontSizePx değeri 16 olarak ayarlanarak ilk SizerComponent.size değeri oluşturulur.

fontSizePx = 16;

Düğmelere tıklandığında AppComponent.fontSizePx değeri güncellenir. Revize edilen AppComponent.fontSizePx değeri, görüntülenen metni daha büyük veya daha küçük yapan stil bağlamayı günceller.

İki yönlü bağlama sözdizimi, özellik bağlama ve olay bağlamanın bir kombinasyonu için kısaltılmıştır. SizerComponent bağlama, ayrı özellik bağlama ve olay bağlama olarak aşağıdaki gibidir.

<app-sizer [size]="fontSizePx" (sizeChange)="fontSizePx=$event"></app-sizer>

$Event değişkeni SizerComponent.sizeChange olayının verilerini içerir. Angular, kullanıcı düğmelere tıkladığında $event değerini AppComponent.fontSizePx‘e atar.