@Input ve @Output bileşen iletişimini nasıl etkinleştirir?

Question

Accepted Answer

`@Input` ve `@Output`, bir ana bileşen ile alt bileşenin iletişim kurmasının standart yoludur: **`@Input`** verileri *aşağıya* iletir (ana → alt), **`@Output`** olayları *yukarıya* gönderir (alt → ana). Bu, evrensel "props aşağıya, olaylar yukarıya" desenini yansıtır. ## @Input — veriler aşağıya akıyor ```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 — olaylar yukarıya akıyor ```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 ``` Alt bileşen `EventEmitter` üzerinden yayınlar; ana bileşen `(eventName)` ile bağlanır ve yükü `$event` olarak alır. Alt bileşen asla ana bileşenin verilerini doğrudan değiştirmez — yayın yaparak *işlem ister*. ## Tam desen ```text Parent ──[user]──────────────→ Child (@Input: data down) Parent ←──(deleted)=removeUser─ Child (@Output: events up) ``` ## Neden önemli `@Input`/`@Output`, Angular'da ana-alt bileşen iletişiminin ve yeniden kullanılabilir bileşenlerin çekirdeğidir — tek yönlü veri akışını (girdiler yoluyla aşağıya, olaylar yoluyla yukarıya) zorunlu kılarlar ve verileri öngörülebilir, bileşenleri bağımsız tutar. Bu çifti anlamak, önemsiz olmayan herhangi bir Angular arayüzü oluşturmak için gereklidir; ilişkisiz bileşenler arasında iletişim için paylaşılan bir hizmet veya durum kütüphanesi kullanırsınız. ## Modern sinyal girdileri ```ts name = input(); // signal-based @Input (newer Angular) deleted = output(); // signal-based @Output ``` Son Angular sürümleri sinyal tabanlı `input()`/`output()` işlevlerini alternatif olarak ekler.