Outputları Olan Özel Etkinlikler

Angular bileşenleri, yeni bir EventEmitter’a bir özellik atayarak ve @Output dekoratörünü ekleyerek özel olaylar tanımlayabilir:

@Component({...})
export class ExpandablePanel {
  @Output() panelClosed = new EventEmitter<void>();
}

<expandable-panel (panelClosed)="savePanelState()" />

EventEmitter üzerindeki emit yöntemini çağırarak bir olay yayabilirsiniz:

this.panelClosed.emit();

Angular, @Output dekoratörü ile işaretlenmiş özellikleri çıktı olarak adlandırır. Çıktıları, tıklama gibi yerel tarayıcı olaylarına benzer şekilde diğer bileşenlere veri aktarmak için kullanabilirsiniz.

Angular özel olayları DOM’da fazlalık oluşturmaz.

Output adları büyük/küçük harfe duyarlıdır.

Bir component sınıfı genişletilirken, outputlar alt sınıf tarafından miras alınır.

Emitting event verileri #

Emit’i çağırırken olay verilerini iletebilirsiniz:

// You can emit primitive values.
this.valueChanged.emit(7);
// You can emit custom event objects
this.thumbDropped.emit({
  pointerX: 123,
  pointerY: 456,
})

Bir şablonda bir event listener tanımlarken, olay verilerine $event değişkeninden erişebilirsiniz:

<custom-slider (valueChanged)="logValue($event)" />

Output adlarını özelleştirme #

Output dekoratörü, bir şablonda olay için farklı bir ad belirtmenize olanak tanıyan bir parametre kabul eder:

@Component({...})
export class CustomSlider {
  @Output('valueChanged') changed = new EventEmitter<number>();
}

<custom-slider (valueChanged)="saveVolume()" />

Bu takma ad, özelliğin TypeScript kodundaki kullanımını etkilemez.

Genellikle bileşenler için outputlara takma ad vermekten kaçınmanız gerekse de, bu özellik orijinal ad için bir takma ad korurken özellikleri yeniden adlandırmak veya yerel DOM olaylarının adıyla çakışmaları önlemek için yararlı olabilir.

Outputları @Component dekoratöründe belirtin #

@Output dekoratörüne ek olarak, bir bileşenin outputlarını @Component dekoratöründeki outputs özelliği ile de belirtebilirsiniz. Bu, bir bileşen bir özelliği bir temel sınıftan miras aldığında yararlı olabilir:

// `CustomSlider` inherits the `valueChanged` property from `BaseSlider`.
@Component({
  ...,
  outputs: ['valueChanged'],
})
export class CustomSlider extends BaseSlider {}

Ayrıca, dizede iki nokta üst üste işaretinden sonra takma adı koyarak outputs listesinde bir çıktı takma adı belirtebilirsiniz:

// `CustomSlider` inherits the `valueChanged` property from `BaseSlider`.
@Component({
  ...,
  outputs: ['valueChanged: volumeChanged'],
})
export class CustomSlider extends BaseSlider {}

Etkinlik adlarını seçme #

HTMLElement gibi DOM öğelerindeki olaylarla çakışan çıktı adları seçmekten kaçının. İsim çakışmaları, bağlı özelliğin component mi yoksa DOM öğesine mi ait olduğu konusunda karışıklığa neden olur.

Bileşen seçicilerde olduğu gibi bileşen outputları için ön ek eklemekten kaçının. Belirli bir eleman yalnızca bir bileşen barındırabildiğinden, tüm özel özelliklerin bileşene ait olduğu varsayılabilir.

Her zaman camelCase çıktı adları kullanın. Output adlarının önüne “on” eklemekten kaçının.