როგორ ხელმძღვანელობს @Input და @Output კომპონენტის კომუნიკაციას?

Question

IT Interview Practice · Accepted Answer

`@Input` და `@Output` არის სტანდარტული გზა, რომელზეც მშობელი და შვილი კომპონენტები ურთიერთობენ: **`@Input`** გადასცემს მონაცემებს *ქვემოთ* (მშობელი → შვილი), ხოლო **`@Output`** აგზავნის ღონისძიებებს *ზემოთ* (შვილი → მშობელი). ეს ასახავს უნივერსალურ "props ქვემოთ, ღონისძიებები ზემოთ" შაბლონს. ## @Input — მონაცემები ქვემოთ მიედინება ```ts // child: UserCardComponent import { Component, Input } from "@angular/core"; @Component({ selector: "app-user-card", template: `

` }) export class UserCardComponent { @Input() user!: User; // receives data from the parent @Input() showEmail = false; // with a default } ``` ```html ``` ## @Output — ღონისძიებები ზემოთ მიედინება ```ts // child emits an event the parent can listen to import { Component, Output, EventEmitter } from "@angular/core"; @Component({ selector: "app-user-card", template: ``, }) export class UserCardComponent { @Output() deleted = new EventEmitter(); // declares an output event onDelete() { this.deleted.emit(this.user.id); // emit with a payload } } ``` ```html ``` შვილი კომპონენტი ემიტირებს `EventEmitter`-ის მეშვეობით; მშობელი კომპონენტი აკავშირებს მას `(eventName)`-ით და იღებს დატვირთვას `$event`-ის სახით. შვილი კომპონენტი არასოდეს ცვლის მშობლის მონაცემებს პირდაპირ — ეს *ითხოვს* ქმედებას ემიტირების გზით. ## სრული შაბლონი ```text Parent ──[user]──────────────→ Child (@Input: data down) Parent ←──(deleted)=removeUser─ Child (@Output: events up) ``` ## თანამედროვე სიგნალური შესატანი ```ts name = input(); // signal-based @Input (newer Angular) deleted = output(); // signal-based @Output ``` Angular-ის ახალ ვერსიებში დაემატა `input()`/`output()` ფუნქციები, რომლებიც სიგნალებზე დაფუძნებული ალტერნატივაა. ## რატომ არის მნიშვნელოვანი `@Input`/`@Output` არის Angular-ში მშობელი-შვილი კომუნიკაციის და საბრუნებელი კომპონენტების ბირთვი — ისინი იძულებენ ცალმხრივი მონაცემების ნაკადი (ქვემოთ შესატანების მეშვეობით, ზემოთ ღონისძიებების მეშვეობით), რაც შენს მონაცემებს პროგნოზირებადს ინახებს და კომპონენტები გამოუსადეგარი დაკავშირებისგან დაცული. ამ წყვილის გაგება აუცილებელია ნებისმიერი არა-ტრივიალური Angular UI-ის შემადგენლობისთვის; დაკავშირებული კომპონენტებს შორის კომუნიკაციისთვის თქვენ გამოიყენებთ გაზიარებული სერვის ან სახელმწიფოს ბიბლიოთეკის ნაცვლად.

@Input — მონაცემები ქვემოთ მიედინება

@Output — ღონისძიებები ზემოთ მიედინება

სრული შაბლონი

თანამედროვე სიგნალური შესატანი

რატომ არის მნიშვნელოვანი

დაკავშირებული კითხვები