Conas a bhíonn @Input agus @Output ag cumasú cumarsáid chomhpháirt?

Question

Accepted Answer

`@Input` agus `@Output` an bealach caighdeánach a bhíonn ag páirt thuaidh agus páirt thuaidh ag cumarsáid: **`@Input`** a bhíonn ag soláthair sonraí *síos* (páirt thuaidh → páirt thuaidh), agus **`@Output`** a bhíonn ag cur imeachtaí *suas* (páirt thuaidh → páirt thuaidh). Léiríonn sé seo an patrún uilíoch "props síos, imeachtaí suas". ## @Input — floigeann sonraí síos ```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 — floigeann imeachtaí suas ```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 ``` Cuireann an páirt thuaidh `EventEmitter` ar fáil; ceanglaíonn an páirt thuaidh dó le `(eventName)` agus faigheann sé an phaycréad mar `$event`. Ní dhéanann an páirt thuaidh riamh sonraí an pháirt thuaidh a mhodhnú go díreach — tugann sé *iarratas* ar ghníomh a bhíonn ann trí ghealadh. ## An patrún iomlán ```text Parent ──[user]──────────────→ Child (@Input: data down) Parent ←──(deleted)=removeUser─ Child (@Output: events up) ``` ## Ionchur comhartha nua-aoiseach ```ts name = input(); // signal-based @Input (newer Angular) deleted = output(); // signal-based @Output ``` Cuireann Angular le déanaí feidhmeanna `input()`/`output()` bunaithe ar chomhartha ar fáil mar rogha eile. ## Cén fáth a bhíonn tábhacht air `@Input`/`@Output` an croílár de chumarsáid páirt thuaidh-chláir agus comhpháirt in-athúsáide in Angular — déanann siad floigeadh sonraí aon-bhealach (síos trí ionchair, suas trí imeachtaí) a bhíonn ann a choinníonn sonraí infheidhmithe agus comhpháirt neamhspleách. Is gá tuiscint a bheith agat ar an ngréine seo le haghaidh comhpháirt neamhthrivial Angular UI a dhéanamh suas; le haghaidh cumarsáid idir comhpháirt nach bhfuil gaol acu, bheadh serbhís roinnte nó leabharlann stáit á úsáid agat ina ionad sin.