Açısal 2 - Veri Bağlama
İki yönlü bağlama, Angular JS'de bir işlevsellikti, ancak Angular 2.x'ten itibaren kaldırıldı. Ama şimdi, Angular 2'deki sınıfların olayından beri, AngularJS sınıfındaki özelliklere bağlanabiliriz.
Bir sınıf adı olan bir sınıfınız, türü ve değeri olan bir özelliğiniz olduğunu varsayalım.
export class className {
property: propertytype = value;
}Daha sonra bir html etiketinin özelliğini sınıfın özelliğine bağlayabilirsiniz.
<html tag htmlproperty = 'property'>Özelliğin değeri daha sonra html'nin html özelliğine atanacaktır.
Veri bağlamayı nasıl başarabileceğimize dair bir örneğe bakalım. Örneğimizde, resim kaynağının sınıfımızdaki özelliklerden geleceği resimleri görüntülemeye bakacağız. Bunu başarmak için gereken adımlar aşağıdadır.
Step 1- Herhangi 2 resmi indirin. Bu örnek için, aşağıda gösterilen bazı basit resimleri indireceğiz.
Step 2 - Bu görüntüleri adlı bir klasörde saklayın Imagesuygulama dizininde. Görüntüler klasörü yoksa, lütfen oluşturun.
Step 3 - Aşağıdaki içeriği app.component.ts'e aşağıda gösterildiği gibi ekleyin.
import { Component } from '@angular/core';
@Component ({
selector: 'my-app',
templateUrl: 'app/app.component.html'
})
export class AppComponent {
appTitle: string = 'Welcome';
appList: any[] = [ {
"ID": "1",
"url": 'app/Images/One.jpg'
},
{
"ID": "2",
"url": 'app/Images/Two.jpg'
} ];
}Step 4 - Aşağıdaki içeriği app.component.html'ye aşağıda gösterildiği gibi ekleyin.
<div *ngFor = 'let lst of appList'>
<ul>
<li>{{lst.ID}}</li>
<img [src] = 'lst.url'>
</ul>
</div>Yukarıdaki app.component.html dosyasında, resimlere sınıfımızdaki özelliklerden erişiyoruz.
Çıktı
Yukarıdaki programın çıktısı şu şekilde olmalıdır -
