Input & Output
Input & Output
Input
და Output
არიან დეკორატორები, რომელთა საშუალებითაც შეგვიძლია მონაცემები (data) და მოვლენები (events)
გადავცეთ ერთი კომპონენტიდან მეორეს. Input
-ის საშუალებით შვილი კომპონენტი მშობელისგან იღებს
მონაცემს, ხოლო Output
-ის საშუალებით შვილი კომპონენტი მოვლენას გადასცემს მშობელ კომპონენტს.
სანიმუშოდ შექმნილი გვაქვს ანგულარის ახალი აპლიკაცია, სადაც შევქმენით კომპონენტი სახელად child.
ეს უკანასკნელი სელექტორით განვათავსეთ app.component.html
-ში. ChildComponent
გამოდის AppComponent
-ის
შვილი.
Input
გადავცეთ მშობელი კომპონენტიდან შვილ კომპონენტს ინფორმაცია. ამისთვის შვილ კომპონენტში ვქმნით თვისებას
@Input
დეკორატორით, რომელიც @angular/core
-დან უნდა დავაიმპორტოთ.
import { Component, Input } from '@angular/core';
import { CommonModule } from '@angular/core';
@Component({
selector: 'app-child',
standalone: true,
imports: [CommonModule],
templateUrl: './child.component.html',
styleUrl: './child.component.scss',
})
export class ChildComponent {
@Input() message: string = '';
}
message
ცვლადს ჩვენ ინიციალიზაციას ვუკეთებთ, როგორც ცარიელ სტრინგს.
ამის გარეშე, თუ ტაიპსკრიპტი მკაცრ რეჟიმზე გვაქვს, ქომფაილერში ერორი მოხდება.
რადგან ამ ფროფერთის ინფუთ დეკორატორით ჩვენ ვაცხადებთ, რომ მშობელიდან ველით
მონაცემს, რომელიც ამ ფროფერთიში შეინახება, ანგულარი დარწმუნებული უნდა იყოს, რომ
რაღაც მნიშვნელობა ამ ფროფერთის იმ შემთხვევაშიც ექნება, თუ მან მშობელისგან მონაცემი
არ მიიღო.
message
-ს ჩვენ ამავე კომპონენტის თემფლეითში განვათავსებთ ინტერპოლაციით:
<p>{{ message }}</p>
მშობელ კომპონენტში შევქმნათ მასივი messages
რომელშიც შევინახავთ ორ სტრინგს:
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule],
templateUrl: './app.component.html',
styleUrl: './app.component.scss',
})
export class AppComponent {
messages = ['The first message', 'The second message'];
}
მშობელი კომპონენტის თემფლეითში ფროფერთი ბაინდინგის საშუალებით შეგვიძლია შვილის კლასში არსებულ სახელზე რაიმე მნიშვნელობების მიბმა:
<app-child [message]="messages[0]"></app-child> <app-child [message]="messages[1]"></app-child>
აქ ჩვენ ორი child კომპონენტი განვათავსეთ, სადაც პირველს message თვისებაზე
ვაბამთ messages
მასივში არსებულ პირველ სტრინგს, ხოლო მეორე child კომპონენტს
ვაბამთ messages
მასივში არსებულ მეორე სტრინგს. message
ფროფერთი app-child-ზე
მშობელი კომპონენტიდან ხელმისაწვდომია სწორედ @Input()
დეკორატორის წყალობით.
ასე child კომპონენტი თავის კლასში იმავე სახელის message თვისებაზე მიიღებს მშობელი
ელემენტიდან მიწოდებულ მნიშვნელობას, და მას თემფლეითში განათავსებს.
ტაიპსკრიპტის წყალობით ეს ფროფერთი მხოლოდ კონკრეტული ტიპის მონაცემს მიიღებს,
ანუ თუ ჩვენ message
ფროფერთიზე სხვა ტიპის მნიშვნელობას მივაბამთ, ეს გამოიწვევს
ერორს:
<!-- Error: cannot assign type number to type string -->
<app-child [message]="34"></app-child>
ასე ჩვენ მშობელი ელემენტიდან შვილ ელემენტს გადავცემთ ინფორმაციას.
Output
Output
-ის საშუალებით ჩვენ შეგვიძლია შევქმნათ მოვლენები, რომელსაც შეგვიძლია მშობელი
კომპონენტიდან მოვუსმინოთ (მაგალითად 'click' ივენთის მსგავსად).
ვთქვათ გვინდა, რომ შვილ კომპონენტში ღილაკზე დაჭერისას მშობელ კომპონენტს გადავცეთ მესიჯის ტექსტის სიგრძე. ჯერ შევქმნათ ღილაკი, რომელზე დაკლიკებასაც მოვუსმენთ და საპასუხოდ დავუძახებთ რამე მეთოდს.
<p>{{ message }}</p>
<button (click)="onCount()">Count Message Length</button>
შემდეგ გადავინაცვლოთ ts ფაილში. Input
-ის მსგავსად
ჩვენ შვილ კომპონენტში უნდა შევქმნათ თვისება, @Output
დეკორატორით, რომელიც
@angular/core
-დან უნდა დავაიმპორტოთ. ამჯერად ჩვენ თვისების მნიშვნლობაში ახალი
EventEmitter
-ის ინსტანციას ვინახავთ, რომელიც ასევე @angular/core
-დან შემოგვაქვს.
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-child',
standalone: true,
imports: [CommonModule],
templateUrl: './child.component.html',
styleUrl: './child.component.scss',
})
export class ChildComponent {
@Input() message: string = '';
@Output() lengthCount = new EventEmitter<number>();
onCount() {
this.lengthCount.emit(this.message.length);
}
}
EventEmitter
არის ე.წ Generic ტიპის კლასი, რაც იმას ნიშნავს, რომ მასში დამატებითი
ტიპი უნდა შევფუთოთ. მარტივად რომ ვთქვათ, ტაიპსკრიპტმა იცის, რომ EventEmitter
რაღაც
მოვლენას გასცემს, თუმცა არ იცის ეს მოვლენა შედეგად რა ტიპის მნიშვნელობას გვაძლევს.
რადგან ჩვენ რიცხვობრივი მნიშვნელობის გადაცემა გვინდა, ამიტომ
ჩვენ მეტობა-ნაკლებობა ნიშნებს შორის ვწერთ number
ტიპს, რათა დავაზუსტოთ, რომ EventEmiter
number
ტიპის მნიშვნელობას გადასცემს მშობელს.
onCount
მეთოდში EventEmitter
-ის ინსტანციაზე, ანუ lengthCount
-ზე დავუძახებთ emit
მეთოდს,
რომელშიც მესიჯის სიგრძეს გადავცემთ არგუმენტად. როცა ღილაკზე დავაკლიკებთ, EventEmitter
emit
მეთოდის საშუალებით, ასე ვთქვათ, სიგნალს გასცემს მშობელ ელემენტს, რომ რაღაც მოვლენა მოხდა და
ეს მოვლენა შეიცავს ინფორმაციას.
მშობელ ელემენტზე ჩვენ ამ მოვლენას შეგვიძლია მოვუსმინოთ, click მოვლენის მსგავსად, ოღონდ
lengthCount
-ზე, იმ თვისებაზე, რომელიც ჩვენ კლასში შევქმენით Output
დეკორატორით:
<app-child [message]="messages[0]" (lengthCount)="logLength($event)"></app-child> <app-child [message]="messages[1]" (lengthCount)="logLength($event)"></app-child>
$event
არის განსაკუთრებული (key) სიტყვა, რომლითაც შეგვიძლია მოვიხელთოთ ის მნიშვნელობა, რომელსაც
ივენთ ემითერი გასცემს და გადავცეთ ის ფუნქციას, რომლითაც ამ ივენთს მოვიხელთებთ. ეს ფუნქცია უბრალოდ
კონსოლში დალოგავს რიცხვს:
// In AppComponent
logLength(length: number) {
console.log(length);
}
ყურადღება მიაქციეთ, რომ ჩვენ length პარამეტრს ექსპლიციტურად ვუწერთ მოსალოდნელ ტიპს. შედეგად კონსოლში უნდა დავლოგოთ თითოეულ კომპონენტში არსებული მესიჯის სიგრძე.
შევაჯამოთ რა ხდება: ღილაკზე დაჭერისას აქტიურდება onCount
მეთოდი, რომელიც EventEmitter
-ის
საშუალებით აემითებს მესიჯის სიგრძეს. ამ ივენთს მოვიხელთებთ მშობელი ელემენტიდან შვილ ელემენტზე
ივენთ ბაინდინგით lengthCount
თვისებაზე (რომელიც Output
დეკორატორით შევქმენით). $event
-ით
ჩვენ დაემითებულ მნიშვნელობას ვიღებთ და ვაწვდით logLength
მეთოდს, რომელიც ამ მნიშვნელობას
კონსოლში ლოგავს.
ngOnChanges - ცვლილებებზე რეაგირება
ჩვენ საშუალება გვაქვს, რომ შვილ კომპონენტში ვირეაგიროთ @Input
თვისებაში შემოსულ ცვლილებებზე.
ამისთვის არსებობს ngOnChanges
სიცოცხლის ციკლის ჰუკი.
import { Component, EventEmitter, Input, Output, OnChanges, SimpleChanges } from '@angular/core';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-child',
standalone: true,
imports: [CommonModule],
templateUrl: './child.component.html',
styleUrl: './child.component.scss',
})
export class ChildComponent implements OnChanges {
@Input() message: string = '';
@Output() lengthCount = new EventEmitter<number>();
onCount() {
this.lengthCount.emit(this.message.length);
}
ngOnChanges(changes: SimpleChanges): void {
if (changes.message) {
console.log('მესიჯი განახლდა: ', changes.message.currentValue);
}
}
}
ngOnChanges
-ში გვაქვს SimpleChanges
ტიპის პარამეტრი რომელსაც ანგულარი გვაწვდის.
აქ თვისებების ფორმით ხელმისაწვდომია ყველა ჩვენი @Input
დეკორატორით შექმნილი კლასის თვისება,
მათ შორის message
. ოღონდ ეს უშუალოდ ის სტრინგი არ არის, რომელიც ჩვენ შევქმენით,
არამედ SimpleChange
ტიპის ობიექტი, რომელსაც გააჩნია currentValue
, previousValue
და
სხვა თვისებები. ngOnChanges
ყოველ ჯერზე გაეშვება, როცა მშობელზე მიბმული @Input
თვისება
მნიშვნელობას შეიცვლის და ეს ახალი მნიშვნელობა ხელმისაწვდომია currentValue
-ში.
თუ რაიმე თვისება არ შეცვლილა, ის changes
-ზე არ იარსებებს, ამიტომ ჯერ უნდა დავრწმუნდეთ,
რომ ის არსებობს, სანამ მასზე ვირეაგირებთ.
ngOnChanges
უნდა გამოვიყენოთ დიდი სიფრთხილით, რადგან აქ მძიმე ლოგიკის გამოყენება
აპლიკაციას შეანელებს.
შეჯამება
ამ თავში ჩვენ განვიხილეთ Input
და Output
დეკორატორები. Input
დეკორატორის საშუალებით
შვილ კომპონენტს გადავცემთ მნიშვნელობას მშობელი კომპონენტიდან, ხოლო Output
დეკორატორის
საშუალებით შვილ კომპონენტზე ვქმნით ივენთის ემითერს, რომელიც კონკრეტულ მნიშვნელობებს
აემითებს. შვილის ივენთ ემითერს ჩვენ შეგვიძლია მშობელი ელემენტიდან მოვუსმინოთ და მოვიხელთოთ
დაემითებული მნიშვნელობები $event
-ის საშუალებით. ჩვენ ასევე შეგვიძლია ვირეაგიროთ მშობლიდან
შვილზე ჩამოწოდებული მონაცემების ცვლილებებზე ngOnChanges
ჰუკით.