Angular, VueJs vb. framework lerin en sevdiğimiz özelliklerinden biride two-way-data-binding(çift taraflı veri bağlama, component-template arası) özelliğidir. Çünkü eski kara düzende, elementleri tek tek selector’ ü ile seçmek, çeşit çeşit eventler yazmak ve bakımı zor kodlarla uğraşmamız gerekiyordu. Hemde, Angular’ ın gelişmiş kütüphaneleri kadar iyi kodlar yazmadığımız için, performans açısından büyük sıkıntılar yaşıyorduk.

Local Reference

Two-way-data-binding özelliği ile, ngModel üzerinden kolayca erişim sağlayabiliyoruz. Lakin her güzel şeyin bir faturası oluyor 🙂
Two-way-data-binding, çok otomatize bir mekanizma ve siz ihtiyaç duymasanızda, template’ de model üzerinde yapılan bir değişiklik anında component’ e yansıyor. Her gereksiz set işlemi de maaliyet demek.
Bu sebeple, eğer ki template’ de bir verinin, en güncel haline, anlık olarak erişim sağlamak istemiyor, herhangi bir event üzerinden, view’ daki mantığa uygun olarak, gerektiğinde erişmek istiyorsanız, local Reference özelliğini kullanabiliriz.

Canlı hali;

Daha önceden ngModel ile çalışmıştık. ngModel ve input ile çalışırken, app.module’ e FormsModule’ ü import etmeyi unutmayalım.

  • local Refence, ilgili element’ te # işareti ile tanımlanır. #veriIsmi

  • Kıyaslama yapabilmek için hem ngModel ile, hemde local Reference ile çalışan 2 adet input tanımlıyoruz, her input’ un altında bir string interpolation mevcut. Ve 1 adet de, local Reference’ ı guncelle metoduna paslayan buton var;

    <div class="form-group">
    <label>ngModel</label>
    <input type="text" class="form-control" [(ngModel)]="bir">
    </div>
    <p>bir : {{bir}}</p>
    <div class="form-group">
    <label>local Referance</label>
    <input type="text" class="form-control" #iki>
    </div>
    <p> iki : {{ikininDegeri}}</p>
    <button type="button" class="btn btn-primary" (click) = guncelle(iki)>Güncelle</button>
  • Bu haliyle, ngModel çift taraflı data-binding yaparak, view’ da ki ilgili p element’ inde hemen gözüküyor.Lakin localRefence nasıl gözükecek ?

  • guncelle metodu ;

  guncelle(iki: HTMLInputElement) {
    this.ikininDegeri = iki.value;
  }
  • guncelle metodu, template’ deki butonun click event’ in den tetikleniyor ve gelen değeri, ikininDegeri model’ ine set ediyor. Ancak bu sayede, localReference’ ın değerini görebiliyoruz.

Amaç, local Reference’ ın değerini view’ da göstermek değil. Öyle olsa, ngModel kullanabilirdik. Dikkat çekmek istediğim yer, eğer ki template’ deki bazı değerlere anlık olarak erişmeye ihtiyacınız yoksa, component’ teki kurguya göre, bir butona basıldığında yada bir event gerçekleştiğinde de ilgili verileri alabilirsiniz. Bu yöntem uygulamanızın performansını arttıracaktır.

ViewChild

ViewChild bir decorator’ dür. Template’ de local Reference olarak tanımlanmış değerlere ulaşmamızı sağlar.
Syntax;

import { ViewChild, ElementRef } from '@angular/core';

@ViewChild('localReferenceIsmi', {static: true}) localReferenceIsmi: ElementRef;
  • ViewChild decorator ve ElementRef alias’ ı import etmeniz gerekmektedir.
  • ViewChild decorator’ e template’ de yazmış olduğunuz localReference’ ın ismini ve static: true değerlerini vermeniz gerekiyor. Ardından ElementRef tipinde olduğunu belirterek, ilgili local Reference’ ı component’ te ele alacağınız model ismini vermelisiniz.

Template’ imizin yeni hali;

<div class="container">

  <div class="form-group">
    <label>local Referance</label>
    <input type="text" class="form-control" #iki>
  </div>

  <button type="button" class="btn btn-primary" (click) = bastir()>Güncelle</button>

</div>
  • Buton artık paslama yapmıyor sadece bastir metodunu tetikliyor.

Component kısmı;

@ViewChild('iki', {static: true}) iki: ElementRef;

  bastir() {
    alert(this.iki.nativeElement.value);
  }
  • iki adını verdiğimiz local Reference artık bir Element Ref ve değerine ulaşmak için, nativeElement.value özelliğini kullanıyoruz.

Uygulamanın canlı hali;

Last modified: 10 November 2019

Author

Comments

Write a Reply or Comment

Your email address will not be published.