Olay Bağlama

Olay bağlama, tuş vuruşları, fare hareketleri, tıklamalar ve dokunmalar gibi kullanıcı eylemlerini dinlemenizi ve bunlara yanıt vermenizi sağlar.

Olaylara bağlanma #

Bir olaya bağlanmak için Angular olay bağlama sözdizimini kullanırsınız. Bu sözdizimi, eşittir işaretinin solundaki parantezler içinde bir hedef olay adı ve sağda tırnak içine alınmış bir şablon ifadesinden oluşur.

Aşağıdaki örneği oluşturun; hedef olay adı click ve şablon ifadesi onSave().

<button (click)="onSave()">Save</button>

Olay bağlama, düğmenin tıklama olaylarını dinler ve bir tıklama meydana geldiğinde bileşenin onSave() yöntemini çağırır.

Bir olay hedefi belirleme #

Bir olay hedefini belirlemek için Angular, hedef olayın adının bilinen bir yönergenin olay özelliğiyle eşleşip eşleşmediğini kontrol eder.

Aşağıdaki örneği oluşturun: (Angular, myClick‘in özel ClickDirective üzerinde bir olay olup olmadığını kontrol eder)

<h4>myClick is an event on the custom ClickDirective:</h4>
  <button type="button" (myClick)="clickMessage=$event" clickable>click with myClick</button>
  {{ clickMessage }}

Hedef olay adı olan myClick, ClickDirective‘in bir çıktı özelliğiyle eşleşmezse, Angular bunun yerine altta yatan DOM öğesindeki myClick olayına bağlanır.

Klavye olaylarına bağlanma #

Angular’ın bağlama sözdizimini kullanarak klavye olaylarına bağlayabilirsiniz. Klavye olaylarına bağlamak istediğiniz tuşu veya kodu belirtebilirsiniz. Key ve code alanları, tarayıcı klavye olay nesnesinin yerel bir parçasıdır. Varsayılan olarak, olay bağlama, klavye olayında key alanını kullanmak istediğinizi varsayar. Code alanını da kullanabilirsiniz.

Tuş kombinasyonları bir . (nokta) ile ayrılabilir. Örneğin, keydown.enter, olayları enter tuşuna bağlamanıza olanak tanır. Ayrıca shift, alt, control ve Mac’teki command tuşları gibi değiştirici tuşları da kullanabilirsiniz. Aşağıdaki örnekte bir klavye olayının keydown.shift.t‘ye nasıl bağlanacağı gösterilmektedir.

<input (keydown.shift.t)=”onKeydown($event)” />

İşletim sistemine bağlı olarak, bazı tuş kombinasyonları beklediğiniz tuş kombinasyonu yerine özel karakterler oluşturabilir. Örneğin MacOS, option ve shift tuşlarını birlikte kullandığınızda özel karakterler oluşturur. MacOS’ta keydown.shift.alt.t‘ye bağlarsanız, bu kombinasyon t yerine ˇ karakteri üretir, bu da bağlama ile eşleşmez ve olay işleyicinizi tetiklemez. MacOS’ta keydown.shift.alt.t‘ye bağlamak için, bu örnekte gösterilen keydown.code.shiftleft.altleft.keyt gibi doğru davranışı elde etmek üzere code klavye olay alanını kullanın.

<input (keydown.code.shiftleft.altleft.keyt)=”onKeydown($event)” />

Code alanı key alanından daha spesifiktir. Key alanı her zaman shift bildirirken, code alanı leftshift veya rightshift belirtir. Code alanını kullanırken, istediğiniz tüm davranışları yakalamak için ayrı bağlar eklemeniz gerekebilir. Kod alanını kullanmak, macOS’taki shift + option davranışı gibi işletim sistemine özgü davranışları ele alma ihtiyacını ortadan kaldırır.

Pasif olaylara bağlanma #

Bu, çoğu uygulama için gerekli olmayan gelişmiş bir tekniktir. Performans sorunlarına neden olan sık meydana gelen olayların işlenmesini optimize etmeniz gerekiyorsa bunu yararlı bulabilirsiniz.

Örneğin, bir kaydırma olayını pasif hale getirmek için aşağıdaki adımları kullanın.

1-src dizini altında bir zone-flags.ts dosyası oluşturun.

2-Bu dosyaya aşağıdaki satırı ekleyin.

(window as any)['__zone_symbol__PASSIVE_EVENTS'] = ['scroll'];

3-src/polyfills.ts dosyasında, zone.js dosyasını içe aktarmadan önce, yeni oluşturulan zone-flags dosyasını içe aktarın.

import './zone-flags';
import 'zone.js';  // Included with Angular CLI.

Bu adımlardan sonra, scroll olayı için olay dinleyicileri eklerseniz, dinleyiciler passive olacaktır.