Komponen Anak dalam Angular

Seperti yang disebutkan pada awal tutorial, dalam Angular, keseluruhan projek dipecahkan kepada komponen. Dalam pelajaran sebelumnya, kami bekerja hanya dengan komponen utama, yang dicipta secara lalai. Sekarang mari kita belajar mencipta komponen anak.

Kod untuk komponen baru dijana secara automatik oleh Angular menggunakan arahan terminal khas: generate component. Selepas perkataan component, kita perlu menulis nama komponen baru kita. Katakan kita mahu menjana komponen user:

ng generate component user

Selepas arahan dilaksanakan, kita akan lihat bahawa folder baru app/user telah wujud. Di dalamnya akan terdapat semua fail standard komponen.

Dalam fail komponen user.component.ts dekorator komponen akan dicipta secara automatik:

@Component({
	selector: 'app-user',
	templateUrl: './user.component.html',
	styleUrls: ['./user.component.css']
})

Juga dalam fail ini, kelas komponen akan dicipta secara automatik:

export class UserComponent {

}

Sekarang komponen anak kita perlu disambungkan ke komponen induk. Katakan komponen induk ialah komponen app, yang sedia ada secara lalai apabila kerangka kerja dipasang. Mari import komponen kita ke dalamnya:

import { UserComponent } from './user/user.component';

Dalam dekorator komponen, pada kunci imports nyatakan komponen yang kita import:

@Component({
	selector: 'app-root',
	imports: [UserComponent], // di sini
	templateUrl: './user.component.html',
	styleUrls: ['./user.component.css']
})

Sekarang kita boleh memaparkan kandungan komponen anak dalam komponen induk. Untuk ini, dalam fail dengan templat induk, kita perlu menulis tag khas, yang namanya ditetapkan dalam property selector dekorator @Component anak. Dalam kes kami, ini ialah tag app-user. Tulisnya dalam templat induk:

some text
<app-user></app-user>

Jana komponen ProductComponent. Sambungkan komponen ini ke komponen utama projek anda.

Buat perubahan pada templat komponen anak. Pastikan ia diterapkan dalam pelayar.

Tukar gaya CSS komponen anak. Pastikan ia diterapkan dalam pelayar.

Dalam komponen anak, buat properties name dan price. Paparkan nilainya dalam templat komponen anak.