Sizin gibi okuyucular MUO'yu desteklemeye yardımcı oluyor. Sitemizdeki bağlantıları kullanarak bir satın alma işlemi gerçekleştirdiğinizde, bir ortaklık komisyonu kazanabiliriz.
İki yönlü bağlama ile bileşenleriniz verileri gerçek zamanlı olarak paylaşabilir, olayları işleyebilir ve değerleri güncelleyebilir.
İki yönlü bağlama, kullanıcıların HTML dosyasından veri girmesine ve bunu TypeScript dosyasına gönderip geri göndermesine olanak tanır. Bu, giriş doğrulama, manipülasyon ve daha fazlası için kullanışlıdır.
Verileri HTML'den TypeScript dosyasına ilettiğinizde, belirli iş mantığını tamamlamak için verileri kullanabilirsiniz. Bir giriş alanına girilen adın zaten var olup olmadığını kontrol etmek isteyip istemediğinize örnek bir senaryo verilebilir.
İki Yönlü Ciltlemeyi Nasıl Kullanabilirsiniz?
Angular uygulamalarında iki yönlü bağlama genellikle .html dosyasını kullanarak, ngModel direktif. Bir giriş formundaki iki yönlü bağlama şuna benzer:
<giriş
tür="e-posta"
kimlik="e-posta"
isim="e-posta"
yer tutucu="ö[email protected]"
[(ngModel)]="e-postaAdresi"
/>İçinde .ts dosya, e-postaAdresi değişken, formdan emailAddress'e bağlıdır.
e-postaAdresi: Dize = ''; Angular Uygulamasında Örnek Form Nasıl Kurulur
Temel bir uygulama oluşturarak, olası bir kullanıcı adının zaten var olup olmadığını kontrol etmek için iki yönlü bağlamayı kullanabilirsiniz.
- Oluşturmak yeni Açısal uygulama.
- çalıştır bileşen oluşturma Yeni bir bileşen oluşturmak için komut. Formu saklayacağınız yer burasıdır.
username-checker-form bileşenini oluştur - İçindeki tüm kodu değiştir uygulama.bileşen.html aşağıdaki etiketlerle dosya:
<app-username-checker-form></app-username-checker-form> - Aşağıdaki CSS'yi yeni bileşeninizin içine ekleyin .css adresinde bulunan dosya username-checker-form.component.css, forma stil vermek için:
.konteyner {
ekran: esnek;
metin hizalama: merkez;
haklı içerik: merkez;
hizalama öğeleri: merkez;
yükseklik: 100vh;
}.kart {
genişlik: %50;
arka plan rengi: peachpuff;
sınır yarıçapı: 1rem;
dolgu: 1rem;
}giriş {
sınır: 3piksel katı #1a659e;
sınır yarıçapı: 5px;
yükseklik: 50 piksel;
satır yüksekliği: normal;
renk: #1a659e;
Ekran bloğu;
genişlik: %100;
kutu boyutlandırma: kenarlık kutusu;
kullanıcı-seçme: Oto;
yazı tipi boyutu: 16 piksel;
dolgu: 0 6 piksel;
sol dolgu: 12px;
}giriş:odak {
sınır: 3piksel katı #004e89;
}.btn {
Ekran bloğu;
anahat: 0;
imleç: işaretçi;
sınır: 2piksel katı #1a659e;
sınır yarıçapı: 3px;
renk: #fff;
arka plan: #1a659e;
yazı tipi boyutu: 20px;
yazı tipi ağırlığı: 600;
satır yüksekliği: 28px;
dolgu: 12 piksel 20 piksel;
genişlik: %100;
kenar boşluğu: 1rem;
}.btn:vurgulu {
arka plan: #004e89;
sınır: #004e89;
}.başarı {
renk: #14ae83;
}.hata {
renk: #fd536d;
} - Aşağıdaki CSS'yi ekleyin kaynak/stil.css genel uygulamanın yazı tipi ailesini, arka planını ve metin renklerini ayarlamak için:
@url'yi içe aktar("https://fonts.googleapis.com/css2?family=Poppins: ağırlık@300;400&ekran=takas");vücut {
font ailesi: "Poppins";
arka plan rengi: papayawhip;
renk: #1a659e;
} - içindeki kodu değiştir username-checker-form.component.html, kullanıcı adı denetleyici formunu eklemek için:
<div sınıfı="konteyner">
<div sınıfı="kart">
<h1> Kullanıcı Adı Denetleyicisi </h1><biçim>
<giriş
tür="metin"
kimlik="Kullanıcı adı"
isim="Kullanıcı adı"
yer tutucu="Lütfen bir kullanıcı adı giriniz"
/>
<düğme sınıfı="btn"> Kaydetmek </button>
</form></div>
</div> - Terminalde ng serve komutunu kullanarak uygulamanızı çalıştırın.
hizmet etmek - Başvurunuzu şu adreste görüntüleyin: http://localhost: 4200/.
HTML ve TypeScript Dosyaları Arasında Veri Gönderme
Bilgisayarınıza veri göndermek için iki yönlü bağlamayı kullanın. .ts dosya ve geri .html dosya. Bu kullanımı ile mümkündür ngModel formun içinde giriş etiketler.
- içe aktar Form Modülü içine uygulama.module.ts dosyasına ekleyin ve ithalat sıralamak:
içe aktarmak { Form Modülü } itibaren '@açısal/formlar';@NgModule({
//...
ithalat: [
// diğer içe aktarmalar
Form Modülü
],
//...
}) - ilan etmek Kullanıcı adı içindeki sınıf değişkeni .ts dosya, username-checker-form.component.ts:
kullanıcı adı: string = ''; - İçinde username-checker-form.component.html, eklemek [(ngModel)] ile Kullanıcı adı giriş etiketindeki değişken. Bu, iki yönlü bağlamayı etkinleştirir ve formun kullanıcı adı girişine yazılan her şey, formdaki kullanıcı adı değişkenine atanır. .ts dosya.
<giriş
tür="metin"
kimlik="Kullanıcı adı"
isim="Kullanıcı adı"
yer tutucu="Lütfen bir kullanıcı adı giriniz"
[(ngModel)]="Kullanıcı adı"
/> - Verilerin gönderildiğini test etmek için .ts dosya, oluştur kaydetmek() yöntem username-checker-form.component.ts. Formu gönderdiğinizde, uygulama bu işlevi çağıracaktır.
kaydetmek(): geçersiz {
konsol.kayıt(Bu.Kullanıcı adı);
} - Ekle ngGönder yönergesi
- Kaydet düğmesine tıkladığınızda, kaydetmek() işlevi, giriş alanına girilen değeri konsola yazdırır. Çalışma zamanında tarayıcının geliştirici araçlarını kullanarak konsolu görüntüleyebilirsiniz. Tarayıcı DevTools'a aşina değilseniz veya konsolu görüntülüyorsanız, hakkında daha fazla bilgi edinebilirsiniz. Chrome Geliştirici Araçları nasıl kullanılır?.
- Gönder Kullanıcı adı geri dönüş .html dosya. Küme parantezler arasına kullanıcı adı değişkenini ekleyin. username-checker-form.component.html dosya, bundan sonra
- İçinde username-checker-form.component.ts, kullanıcı adının zaten var olup olmadığını kontrol etmek için bazı sınıf değişkenleri ekleyin. ilan etmek kullanıcı adları alınan birkaç kullanıcı adıyla dizi ve bir ekleyin İleti kullanıcıyı çek hakkında bilgilendiren dize. Değişken isGeçerliKullanıcı adı girilen kullanıcı adı usernames dizisinde değilse doğrudur.
kullanıcı adları: string[] = [ 'bart', 'Lisa', 'yağda kızartmak', 'leyla' ];
mesaj: dizi = '';
isGeçerliKullanıcı adı: mantıksal = YANLIŞ; - bu kaydetmek() yöntemi, girilen kullanıcı adının zaten mevcut kullanıcı adları dizisinde olup olmadığını kontrol etmelidir. Sonuca bağlı olarak, mesaj buna göre ayarlanacaktır.
kaydetmek(): geçersiz {
if (this.username != '') {
Bu.isValidUsername = !Bu.usernames.includes(
Bu.Kullanıcı adı.toLowerCase()
);eğer (Bu.isValidUsername) {
Bu.mesaj = `Yeni kullanıcı adınız'${Bu.Kullanıcı adı}'`;
} başka {
Bu.mesaj = "Kullanıcı adı"${Bu.Kullanıcı adı}'zaten alınmış';
}
}
} - Tamamla username-checker-form.component.html girilen kullanıcı adının var olup olmadığını göstererek dosya. Altına bir hata mesajı ekleyin
formdan sonra etiketler. bu isGeçerliKullanıcı adı değişkeni, görüntülenen mesajın rengini belirlemek için burada yardımcı olur.
<p *ngIf="Kullanıcı adı" [ngSınıfı]="Geçerli Kullanıcı adı? 'başarı': 'hata'">
{{ İleti }}
</P> - adresindeki tarayıcınızda yerel ana bilgisayar: 4200, usernames dizisinde bulunan bir kullanıcı adını girmeyi deneyin: Ardından, olmayan bir kullanıcı adı girmeyi deneyin.
Uygulama Geliştirme Sırasında Veri Göndermek İçin İki Yönlü Bağlamayı Kullanma
İki yönlü bağlama, doğrulama, kontroller, hesaplamalar ve daha fazlası için kullanışlıdır. Bileşenlerin gerçek zamanlı olarak iletişim kurmasını ve veri paylaşmasını sağlar.
Bir uygulamanın çeşitli bölümlerinde iki yönlü ciltleme özelliklerini kullanabilirsiniz. Kullanıcıdan veriyi aldıktan sonra iş mantığını çalıştırabilir ve kullanıcıyı sonuçlardan haberdar edebilirsiniz.
Bazen, kullanıcının verilerini bir veritabanında depolamak isteyebilirsiniz. Firebase NoSQL Veritabanı da dahil olmak üzere, kullanabileceğiniz farklı veritabanı sağlayıcı türlerini keşfedebilirsiniz.
