Penghantaran Data ke Komponen Anak dalam Angular

Data boleh dihantar dari komponen induk kepada komponen anak. Data ini akan masuk ke dalam sifat kelas anak. Mari kita lihat bagaimana ia dilakukan.

Pertama, mari buat sifat dalam kelas komponen anak, di mana data dari komponen induk akan diimport:

class UserComponent {
	public name: string = '';
	public age: number = 0;
}

Sekarang kita perlu mengisytiharkan bahawa data dari luar akan masuk ke dalam sifat-sifat ini. Untuk ini, decorator khas Input digunakan. Mari import ia ke dalam komponen anak kita:

import { Input } from '@angular/core';

Dan sekarang gunakan decorator ini untuk sifat-sifat kita:

class UserComponent {
	@Input()
	public name: string = '';
	
	@Input()
	public age: number = 0;
}

Mari tambahkan output data dalam fail templat komponen anak:

<p>{{ name }}</p>
<p>{{ age }}</p>

Dan sekarang dalam templat induk, apabila memanggil tag komponen anak, tulis atribut yang namanya sepadan dengan nama sifat kelas anak kita. Nilai atribut ini akan masuk ke dalam sifat kelas anak:

<user-data name="john" age="25"></user-data>