Interaksi komponen

Dalam pelajaran ini, Anda akan mempelajari cara komponen berkomunikasi di Angular, terutama antara komponen induk dan anak.

Interaksi induk-anak

Komponen sering kali perlu berbagi data. Komponen induk dapat meneruskan data ke komponen anak menggunakan properti masukan.

Menggunakan @Input()

Gunakan dekorator @Input() untuk menerima data dari komponen induk:

@Input() userData: string;

Meneruskan data ke komponen anak

Dalam templat komponen induk, teruskan data menggunakan pengikatan properti:

<app-child [userData]="parentData"></app-child>

Komunikasi anak ke induk

Komponen anak berkomunikasi ke atas menggunakan peristiwa dengan dekorator @Output().

Menggunakan @Output()

Buat pemancar peristiwa untuk mengirim data dari komponen anak ke komponen induk:

@Output() dataEvent = new EventEmitter<string>();

Memancarkan peristiwa

Pancarkan peristiwa dari komponen anak:

sendData() {
  this.dataEvent.emit('Hello from Child');
}

Mendengarkan peristiwa di komponen induk

Tangani peristiwa yang dipancarkan dalam templat komponen induk:

<app-child (dataEvent)="handleEvent($event)"></app-child>

Ringkasan

Sekarang Anda memahami cara komponen dapat berinteraksi melalui masukan dan keluaran di Angular. Teruslah berlatih!