Angular'da Bileşen Sınıfı Dosyası

Herhangi bir bileşenin temel kısmı, onun işlevselliği, yani aslında onun programıdır. Angular'da bileşenin işlevselliği TypeScript dilinde yazılır ve bir Nesne Yönelimli Programlama sınıfıdır.

Her bileşende bu sınıf, uzantısı .ts olan dosyada bulunur. Bizim ana bileşenimizde bu, app.component.ts dosyası olacaktır.

Şimdi bu dosyanın içeriğini tanıyalım. Öncelikle bileşenimizin sınıfına dikkat edin:

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

Bu sınıfa, @Component dekoratörü uygulanır. Bu dekoratör, parametresi olarak bileşenimizi yapılandıran bir nesne alır:

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

templateUrl özelliğinde, bileşenimizin HTML kodunu içeren dosyanın yolu belirtilir.

styleUrls özelliğinde, bileşenimizin HTML kodunu stillendiren CSS dosyalarının yollarını içeren bir dizi belirtilir. Gördüğünüz gibi, stil dosyası birden fazla olabilir.

selector özelliğinde, bileşenimizin HTML kodunun ekleneceği (monte edileceği) HTML etiketinin seçicisi belirtilir. Bizim durumumuzda app-root ismini görüyoruz. Bu isme, aynı adlı bir etiket karşılık gelir. Bu etiket, src/index.html şablon dosyasında yazılmıştır. Bu etiketin yazıldığı yere, bileşenimizin HTML kodu eklenecektir.

imports özelliğinde, bileşenimize içe aktarılan modüller belirtilir.

standalone özelliğinde her zaman true değeri belirtilecektir. Şu an bu daha çok Angular'ın hizmet amaçlı bir özelliğidir, bu yüzden şimdilik bunun detaylarına girmeyin.

app.component.ts dosyasını açın ve inceleyin.

Birkaç stil dosyası oluşturun ve bunları dekoratörde bağlayın.