Input Özelliklerine Sahip Verileri Kabul Etme

Bir bileşen oluştururken, belirli sınıf özelliklerini @Input dekoratörünü özelliğe ekleyerek bağlanabilir olarak işaretleyebilirsiniz.

@Component({...})
export class CustomSlider {
  @Input() value = 0;
}

Bu, bir şablonda özelliğe bağlanmanıza olanak tanır:

Bu, bir şablonda özelliğe bağlanmanıza olanak tanır:

Angular, @Input dekoratörü ile işaretlenen özelliklere girişler olarak atıfta bulunur. Bir bileşeni kullanırken, girişlerini ayarlayarak veri aktarabilirsiniz.

Bir bileşen sınıfı genişletildiğinde, girişler çocuk sınıfa miras alınır.

Girdi isimleri harf duyarlıdır.

Input özelleştirme #

@Input dekoratörü, girdiğin nasıl çalıştığını değiştirmene izin veren bir yapılandırma nesnesini kabul eder.

Gerekli Inputlar #

Belirli bir girişin her zaman bir değere sahip olması gerektiğini zorlamak için gerekli seçeneği belirtebilirsiniz.

@Component({...})
export class CustomSlider {
  @Input({required: true}) value = 0;
}

Eğer tüm gerekli girdileri belirtmeden bir bileşeni kullanmaya çalışırsanız, Angular derleme zamanında bir hata raporlar.

Input dönüşümleri #

Angular tarafından ayarlandığında bir girişin değerini değiştirmek için bir dönüşüm işlevi belirtebilirsiniz.

@Component({
  selector: 'custom-slider',
  ...
})
export class CustomSlider {
  @Input({transform: trimString}) label = '';
}
function trimString(value: string | undefined) {
  return value?.trim() ?? '';
}

<custom-slider [label]="systemVolume" />

Yukarıdaki örnekte, systemVolume değeri her değiştiğinde, Angular trimString’i çalıştırır ve etiketi sonuca ayarlar.

Giriş dönüşümlerinin en yaygın kullanım durumu, genellikle şablonlarda null ve undefined içeren daha geniş bir değer türü yelpazesini kabul etmektir.

Girdi dönüştürme işlevi derleme zamanında statik olarak analiz edilebilir olmalıdır. Dönüştürme işlevlerini koşullu olarak veya bir ifade değerlendirmesinin sonucu olarak ayarlayamazsınız.

Girdi dönüştürme işlevleri her zaman saf işlevler olmalıdır. Dönüştürme işlevinin dışındaki duruma güvenmek öngörülemeyen davranışlara yol açabilir.

Tip kontrolü #

Bir girdi dönüşümü belirttiğinizde, dönüşüm işlevinin parametresinin türü, bir şablonda girdiye ayarlanabilecek değer türlerini belirler.

@Component({...})
export class CustomSlider {
  @Input({transform: appendPx}) widthPx: string = '';
}
function appendPx(value: number) {
  return `${value}px`;
}

Yukarıdaki örnekte, widthPx girdisi bir sayı kabul ederken, sınıf üzerindeki özellik bir dizedir

Yerleşik dönüşümler #

Angular, en yaygın iki senaryo için iki yerleşik dönüştürme işlevi içerir: değerleri boolean ve sayılara zorlamak.

import {Component, Input, booleanAttribute, numberAttribute} from '@angular/core';
@Component({...})
export class CustomSlider {
  @Input({transform: booleanAttribute}) disabled = false;
  @Input({transform: numberAttribute}) number = 0;
}

booleanAttribute, özniteliğin varlığının “true” değerini gösterdiği standart HTML boolean özniteliklerinin davranışını taklit eder. Ancak, Angular’ın booleanAttribute’ü “false” gerçek dizesini boolean false olarak değerlendirir.

Şablonlarda bir girdinin adını değiştirmek için takma ad seçeneğini belirtebilirsiniz. #

Şablonlarda bir girdinin adını değiştirmek için takma ad seçeneğini belirtebilirsiniz.

@Component({...})
export class CustomSlider {
  @Input({alias: 'sliderValue'}) value = 0;
}

<custom-slider [sliderValue]="50" />

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

Bileşenler için girdilere takma ad vermekten genellikle kaçınmanız gerekse de, bu özellik orijinal ad için bir takma ad koruyarak özellikleri yeniden adlandırmak veya yerel DOM öğesi özelliklerinin adıyla çakışmaları önlemek için yararlı olabilir.

Ayrıca @Input dekoratörü, config nesnesi yerine ilk parametre olarak takma adı kabul eder.

setters ve getters ile Inputs #

Bir getter ve setter ile uygulanan bir özellik bir girdi olabilir:

export class CustomSlider {
  @Input()
  get value(): number {
    return this.internalValue;
  }
  set value(newValue: number) {
    this.internalValue = newValue;
  }
  private internalValue = 0;
}

Yalnızca public bir setter tanımlayarak salt yazılabilir bir girdi bile oluşturabilirsiniz:

export class CustomSlider {
  @Input()
  set value(newValue: number) {
    this.internalValue = newValue;
  }
  private internalValue = 0;
}

Mümkünse getter ve setter yerine girdi dönüşümlerini kullanmayı tercih edin.

Karmaşık veya maliyetli getter ve setter’lardan kaçının. Angular bir girdinin setter’ını birden çok kez çağırabilir, bu da setter’ın DOM manipülasyonu gibi maliyetli davranışlar gerçekleştirmesi durumunda uygulama performansını olumsuz etkileyebilir.

Girdileri @Component dekoratöründe belirtin #

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

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

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

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

Input adlarını seçme

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

Bileşen seçicilerde olduğu gibi bileşen girdileri için önek 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.