Fail dengan Kelas Komponen dalam Angular

Bahagian utama mana-mana komponen ialah fungsinya, iaitu programnya sendiri. Dalam Angular, fungsi komponen ditulis dalam bahasa TypeScript dan mewakili kelas OOP.

Dalam setiap komponen, kelas ini terletak dalam fail dengan sambungan .ts. Dalam komponen utama kami, ini akan menjadi fail app.component.ts.

Mari kita berkenalan dengan kandungan fail ini. Pertama, perhatikan kelas komponen kami:

export class AppComponent {
	title: string = 'test';
}

Kelas ini menggunakan dekorator @Component. Dekorator ini menerima parameter objek, yang mengkonfigurasi komponen kami:

@Component({
	selector: 'app-root',
	standalone: true,
	imports: [FormsModule],
	templateUrl: './app.component.html',
	styleUrls: ['./app.component.css'],
})

Dalam sifat templateUrl, laluan kepada fail yang mengandungi susun atur komponen kami ditetapkan.

Dalam sifat styleUrls, tatasusunan laluan ke fail CSS yang menggayakan susun atur komponen kami ditetapkan. Seperti yang anda lihat, fail gaya mungkin bukan satu.

Dalam sifat selector, pemilih tag HTML, di mana kod HTML kami akan dipaparkan (dipasang), ditetapkan. Dalam kes kami, kami melihat nama app-root. Nama ini sepadan dengan tag yang sama namanya. Tag ini ditulis dalam fail templat src/index.html. Di tempat di mana tag ini ditulis, susun atur komponen kami akan dimasukkan.

Dalam sifat imports, modul yang diimport ke dalam komponen kami ditunjukkan.

Dalam sifat standalone, nilai true akan sentiasa ditunjukkan. Sekarang ini lebih kepada perkara perkhidmatan Angular, jadi buat masa ini jangan fahaminya.

Buka fail app.component.ts dan kajinya.

Buat beberapa fail dengan gaya dan sambungkannya dalam dekorator.