@Input na @Output ndio njia ya kawaida ambayo sehemu ya mzazi na sehemu ya mtoto husambatiana: inapitisha data (mzazi → mtoto), na inatuma matukio (mtoto → mzazi). Hii inaakisi muundo wa kawaida "props chini, matukio juu".
@Input na @Output ndio njia ya kawaida ambayo sehemu ya mzazi na sehemu ya mtoto husambatiana: inapitisha data (mzazi → mtoto), na inatuma matukio (mtoto → mzazi). Hii inaakisi muundo wa kawaida "props chini, matukio juu".
@Input@Output// child: UserCardComponent
import { Component, Input } from "@angular/core";
@Component({ selector: "app-user-card", template: `<h2>{{ user.name }}</h2>` })
export class UserCardComponent {
@Input() user!: User; // receives data from the parent
@Input() showEmail = false; // with a default
}
<!-- parent passes data via property binding -->
<app-user-card [user]="currentUser" [showEmail]="true"></app-user-card>
// child emits an event the parent can listen to
import { Component, Output, EventEmitter } from "@angular/core";
@Component({
selector: "app-user-card",
template: `<button (click)="onDelete()">Delete</button>`,
})
export class UserCardComponent {
@Output() deleted = new EventEmitter<number>(); // declares an output event
onDelete() {
this.deleted.emit(this.user.id); // emit with a payload
}
}
<!-- parent listens via event binding -->
<app-user-card [user]="u" (deleted)="removeUser($event)"></app-user-card>
Sehemu ya mtoto inatuma kupitia EventEmitter; sehemu ya mzazi inaunganisha kwa (eventName) na kupokea mzigo kama $event. Sehemu ya mtoto haibadilishi data ya mzazi moja kwa moja — inaomba hatua kwa kutuma.
Parent ──[user]──────────────→ Child (@Input: data down)
Parent ←──(deleted)=removeUser─ Child (@Output: events up)
name = input<string>(); // signal-based @Input (newer Angular)
deleted = output<number>(); // signal-based @Output
Angular ya hivi karibuni inaongeza kazi za input()/output() zinazotegemea signal kama mbadala.
@Input/@Output ni msingi wa mawasiliano ya mzazi-mtoto na sehemu zinazoweza kutumiwa mara nyingi katika Angular — wanatekeleza mtiririko wa data wa njia moja (chini kupitia ingizo, juu kupitia matukio) ambayo inaweka data kuwa inayotarajiwa na sehemu ambazo hazijaunganishwa.
Kuelewa jozi hii ni muhimu kwa kutunga UI yoyote ya Angular isiyo ya trivial; kwa mawasiliano kati ya sehemu zisizounganishwa, ungebadilishwa kuwa huduma inayoshirikiwa au kituo cha hali.