Hogyan teszik lehetővé az @Input és @Output deklarátorok a komponensek közötti kommunikációt?

Question

Accepted Answer

Az `@Input` és `@Output` a szülő és gyermek komponens közötti standard kommunikációs módszerek: az **`@Input`** adatokat továbbít *lefelé* (szülő → gyermek), az **`@Output`** pedig eseményeket küld *felfelé* (gyermek → szülő). Ez tükrözi az univerzális "props lefelé, események felfelé" mintát. ## @Input — adatok lefelé áramlanak ```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 — események felfelé áramlanak ```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 ``` A gyermek egy `EventEmitter`-en keresztül küld eseményt; a szülő az `(eventName)` szintaxissal kötődik hozzá, és a payload-ot `$event`-ként kapja meg. A gyermek soha nem módosítja közvetlenül a szülő adatait — *műveletre kér* esemény kibocsátásával. ## A teljes minta ```text Parent ──[user]──────────────→ Child (@Input: data down) Parent ←──(deleted)=removeUser─ Child (@Output: events up) ``` ## Modern signal inputok ```ts name = input(); // signal-based @Input (newer Angular) deleted = output(); // signal-based @Output ``` A legújabb Angular a signal-alapú `input()`/`output()` függvényeket kínálja alternatívaként. ## Miért fontos Az `@Input`/`@Output` az Angular szülő-gyermek kommunikációjának és újrafelhasználható komponenseinek magja — egyirányú adatáramlást (inputok via lefelé, események via felfelé) kényszerítik, ami az adatokat kiszámíthatóvá és a komponenseket függetlenné teszi. E pár megértése elengedhetetlen bármilyen nem triviális Angular felhasználói felület összeállításához; a rokon komponensek közötti kommunikációhoz helyette megosztott szolgáltatást vagy állapotkezelő könyvtárat használnál.