En İyi Property Binding Kullanımları

Birkaç yönergeyi izleyerek, özellik bağlamayı hataları azaltmanıza ve kodunuzu okunabilir tutmanıza yardımcı olacak şekilde kullanabilirsiniz.

Yan etkilerden kaçının #

Bir şablon ifadesinin değerlendirilmesi hiçbir görünür yan etkiye sahip olmamalıdır. Yan etkileri önlemeye yardımcı olmak için şablon ifadeler için sözdizimini kullanın. Genel olarak, doğru sözdizimi size bir özellik bağlama ifadesinde herhangi bir şeye bir değer atamanızı engeller. Sözdizimi ayrıca artırma ve azaltma operatörlerini kullanmanızı da engeller.

Yan etki üretmeye bir örnek #

Bağlandığınız başka bir şeyin değerini değiştiren bir ifadeniz olsaydı, bu değer değişikliği bir yan etki olurdu. Angular, değiştirilen değeri görüntüleyebilir veya görüntülemeyebilir. Angular değişikliği algılarsa bir hata atar.

En iyi uygulama olarak, yalnızca değer döndüren özellikleri ve metotları kullanın.

Doğru türü döndür #

Bir şablon ifade, hedef özelliğin beklediği değer türüyle sonuçlanmalıdır. Örneğin, return:

• string, hedef özellik bir dize bekliyorsa
• number, bir sayı bekliyorsa
• object, bir nesne bekliyorsa.

Bir dize iletme #

Aşağıdaki örnekte, ItemDetailComponent öğesinin childItem özelliği bir dize beklemektedir.

<app-item-detail [childItem]="parentItem"></app-item-detail>

Bu beklentiyi, @Input() türünün string olduğu ItemDetailComponent‘e bakarak doğrulayın:

@Input() childItem = '';

AppComponent içindeki parentItem bir dizedir; bu da [childItem]=”parentItem” içindeki parentItem ifadesinin bir dize olarak değerlendirileceği anlamına gelir.

parentItem = 'lamp';

parentItem başka bir tür olsaydı, childItem @Input() öğesini de bu tür olarak belirtmeniz gerekirdi.

Bir nesne iletme #

Bu örnekte, ItemListComponent, AppComponent’in bir alt bileşenidir ve items özelliği bir nesne dizisi bekler.

<app-item-list [items]="currentItems"></app-item-list>

ItemListComponent‘te @Input(), items, Item[] türüne sahiptir.

@Input() items: Item[] = [];

Item‘ın bir nesne olduğuna ve bir id ve bir name olmak üzere iki özelliğe sahip olduğuna dikkat edin.

export interface Item {
  id: number;
  name: string;
}

app.component.ts dosyasında currentItems, items.ts dosyasındaki Item nesnesi ile aynı şekilde, bir id ve bir name içeren bir nesne dizisidir.

currentItems = [
    {
      id: 21,
      name: 'phone',
    },
  ];

Aynı şekilde bir items sağlayarak, Angular currentItems ifadesini değerlendirdiğinde öğelerin beklentilerini karşılamış olursunuz.