ინტერპოლაცია და მოვლენების მოხელთება

აპლიკაციის რეაქტიულობის უმთავრესი ნაწილია ერთი მხრივ გარკვეულ მოვლენებზე რეაგირება, და, მეორე მხრივ, მნიშვნელობების დინამიკურად გამოსახვა. სწორედ ამის საშუალებას გვაძლევს ანგულარში “event handling”-ი და “interpolation”.

ინტერპოლაცია

ინტერპოლაცია გულისხმობს მნიშვნელობების დოკუმენტში გამოსახვას. ეს მნიშვნელობები შეიძლება იყოს კომპონენტის კლასში არსებული თვისებები, მეთოდების მიერ დაბრუნებული შედეგები, ლოგიკური ოპერაციის შედეგები და ა.შ.

საწყისი ანგულარის აპლიკაცია ავიღოთ სანიმუშოდ, სადაც კლასში შევქმნით თვისებებს title და count:

export class AppComponent {
  title = "Hello there";
  count = 0;
}

მათი გამოსახვა ამავე კომპონენტის თემფლეითში შეგვიძლია ორმაგი კლაკნილი ფრჩხილებით:

<h1>{{ title }}</h1>
<h2>The count is {{ count }}</h2>

ანგულარის ქომფაილერი ავტომატურად ეძებს ცვლადის სახელებს იმავე კომპონენტის კლასის თვისებებში. ამ პრინციპს “data binding-საც” უწოდებენ. ჩვენი კლასის თვისება მიბმულია თემფლეითის ელემენტზე - პირველის ცვლილება იწვევს მეორეს განახლებას. რა თქმა უნდა, ახლა როგორმე ამ მონაცემის შეცვლა უნდა შევძლოთ მომხმარებლის ქმედებებიდან გამომდინარე.

მოვლენების მოხელთება

ვებ-გვერდზე მრავალი მოვლენა არსებობს, ზოგი ავტომატურად ხდება, ზოგს მომხმარებელი იწვევს: დასქროლვა, ელემენტზე დაკლიკება, მაუსის მოძრაობა, ერთი გვერდიდან მეორეზე გადასვლა და ა.შ. ანგულარი საშუალებას გვაძლევს, რომ მომხმარებლის ქმედებებზე ვირეაგიროთ. ქმედებათა შორის ყველაზე გავრცელებულია მაუსის კლიკი (ან ეკრანზე თითის დაჭერა). ვთქვათ გვსურს დაკლიკებაზე რეაგირება: ღილაკზე დაკლიკებამ გვერდზე გამოსახული count უნდა ყოველ ჯერზე ერთით გაიზარდოს.

ჯერ დაგვჭირდება ღილაკის შექმნა და მასზე დაკლიკების მოვლენის მოსმენა:

<h1>{{ title }}</h1>
<h2>The count is {{ count }}</h2>
<button (click)="increment()">Increment</button>

ეს არის ელემენტზე “event binding-ის” სინტაქსი. ღილაკზე არსებობს მრავალი მოვლენა, როგორც ერთგვარი ელემენტის თვისებები, რომელსაც ჩვენ ფრჩხილებში მოვაქცევთ და შემდეგ ტოლობაში, ბრჭყალებს შორის ვუწერთ მეთოდის ძახილს. ანგულარი აპლიკაციას არ დააქომფაილებს, რადგან increment მეთოდი კომპონენტის კლასში არ არსებობს. შევქმნათ ეს მეთოდი:

export class AppComponent {
  title = "Hello there";
  count = 0;

  increment() {
    this.count += 1;
  }
}

ანგულარი აპლიკაციას ახლა წარმატებით დააქომფაილებს. შედეგად მივიღებთ ღილაკს, რომელზე დაკლიკებაც ეკრანზე რიცხვს ზრდის. დაკლიკება იწვევს increment() მეთოდზე დაძაახებას, რომელიც კლასში count თვისებას ერთით ზრდის. ამ ცვლილებას ანგულარი თავისით აფიქსირებს, და რადგან ის ინტერპოლაციით არის განთავსებული თემფლეითში, მას ხელახლა არენდერებს, ამჯერად ახალი მნიშვნელობით.

მოდით, შევისწავლოთ binding-ის პრინციპი ცოტა უფრო სიღრმისეულად!