რა არის სიგნალები?

Angular Signals არის სისტემა, რომელიც თვალს ადევნებს სად არის ჩვენი აპლიკაციის სთეითი და როგორ იცვლება ის. შედეგად ანგულარი ოპტიმიზირებულად არენდერებს თემფლეითებს.

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

Writable Signals

მოდიფიცირებადი სიგნალები გვაწვდიან API-ს მათი მნიშვნელობების გასაახლებლად. სიგნალები იქმნება signal ფუნქციით (angular/core-დან), რომელსაც საწყისი მნიშვნელობა უნდა მივაწოდოთ.

count = signal(0);

ასეთი სიგნალის ტიპი არის WritableSignal.

თემფლეითში ამ მნიშვნელობის გამოსატანად ჩვენ count-ს ფუნქციასავით ვეძახით:

<button>Count: {{ count() }}</button>

სიგნალის მნიშვნელობის შესაცვლელად შეგვიძლია მასზე set მეთოდს დავუძახოთ:

<button (click)="count.set(3)">Count: {{ count() }}</button>

თუ მნიშვნელობის განახლება გვინდა, მაგრამ ამისთვის სიგნალის წინა მნიშვნელობა გვჭირდება, მაშინ update მეტოდი გამოგვადგება, სადაც ქოლბექში წინა მნიშვნელობას ვიღებთ და შეგვიძლია ახალი დავაბრუნოთ:

count.update((value) => value + 1)

Computed Signals

გამოთვლილი სიგნალები არიან არამოდიფიცირებადი სიგნალები, რომლებიც მნიშვნელობას სხვა სიგნალებიდან გამომდინარე ატარებენ:

@Component({
  template: `
    <button (click)="increment()">Count: {{ count() }}</button>
    <p>Is even: {{ isCountEven() }}</p>
  `,
})
export class AppComponent {
  count = signal(0);
  isCountEven = computed(() => this.count() % 2 === 0);

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

ამ მაგალითში isCountEven ეყრდნობა count სიგნალს. count-ის მნიშვნელობის შეცვლასთან ერთად სათანადოდ შეიცვლება isCountEven.

გასათვალისწინებელია, რომ გამოთვლილი სიგნალი არ არის მოდიფიცირებადი, ComputedSignal ტიპიზე არ არსებობს set და update მეთოდები.

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

Effects

თუ სიგნალები ხელსაყრელია, რადგან ისინი დაინტერესებულ კონსუმერებს აცნობებენ ცვლილებებს, ეფექტები გამოსადეგია მაშინ, როცა ჩვენ ერთი ან მეტი სიგნალის ცვლილებაზე გვინდა ისე ვირეაგიროთ, რომ აპლიკაციის სთეითი არ შეიცვალოს (გამოთვლილი სიგნალებისგან განსხვავებით).

export class AppComponent {
  count = signal(0);

  constructor() {
    effect(() => {
        console.log(`The count was updated to ${this.count()}`)
    })
  }
}

აქ ჩვენ ეფექტს ვქმნით, რომელიც გაეშვება, როცა count სიგნალი მნიშვნელობას შეიცვლის. ეფექტები ყოველთვის ეშვება მინიმუმ ერთხელ. როცა ეფექტი ეშვება, ის თვალყურს ადევნებს ყველა მისთვის საჭირო სიგნალს და ყოველ ცვლილებაზე ხელახლა ეშვება.

ეფექტები ფუნქციონირებას წყვეტენ, როცა კომპონენტი ნადგურდება.