ไฟล์คลาสคอมโพเนนต์ใน Angular

ส่วนสำคัญของคอมโพเนนต์ใดๆ คือ ฟังก์ชันการทำงานของมัน นั่นคือโปรแกรมของมันเอง ใน Angular ฟังก์ชันการทำงานของคอมโพเนนต์ ถูกเขียนด้วยภาษา TypeScript และแสดงถึง คลาส OOP

ในแต่ละคอมโพเนนต์ คลาสนี้จะอยู่ ในไฟล์ที่มีนามสกุล .ts ใน คอมโพเนนต์หลักของเรา นี่จะเป็นไฟล์ app.component.ts

มาทำความรู้จักกับเนื้อหาภายในไฟล์นี้กัน เริ่มต้นโปรดสังเกตที่ คลาสของคอมโพเนนต์ของเรา:

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

คลาสนี้ใช้ดีโคเรเตอร์ @Component ดีโคเรเตอร์นี้รับพารามิเตอร์เป็น ออบเจ็กต์ ซึ่งกำหนดค่าคอมโพเนนต์ของเรา:

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

ในคุณสมบัติ templateUrl กำหนดเส้นทาง ไปยังไฟล์ที่มีการจัดวางโครงร่าง (markup) ของ คอมโพเนนต์ของเรา

ในคุณสมบัติ styleUrls กำหนดอาร์เรย์ ของเส้นทางไปยังไฟล์ CSS ที่กำหนดสไตล์ให้กับการจัดวางโครงร่าง ของคอมโพเนนต์ของเรา อย่างที่คุณเห็น ไฟล์ สไตล์อาจมีได้มากกว่าหนึ่งไฟล์

ในคุณสมบัติ selector กำหนดซีเลกเตอร์ ของแท็ก HTML ที่โค้ด HTML ของ คอมโพเนนต์ของเราจะถูกแสดงผล (mon) ในกรณีของเราเราเห็นชื่อ app-root ชื่อนี้ตรงกับ แท็กที่มีชื่อเดียวกัน แท็กนี้เขียนอยู่ในไฟล์ เลย์เอาต์ src/index.html ในตำแหน่งนั้น ที่เขียนแท็กนี้ และจะเป็นการแทรก การจัดวางโครงร่างของคอมโพเนนต์ของเรา

ในคุณสมบัติ imports ระบุโมดูล ที่ถูกนำเข้าในคอมโพเนนต์ของเรา

ในคุณสมบัติ standalone จะมี ค่าที่ระบุไว้เสมอเป็น true ตอนนี้สิ่งนี้ เป็นเหมือนเครื่องมือบริการของ Angular ดังนั้น อย่าเพิ่งเจาะลึกลงไปในตอนนี้

เปิดไฟล์ app.component.ts และ ศึกษามัน

สร้างไฟล์สไตล์หลายไฟล์และ เชื่อมต่อพวกมันในดีโคเรเตอร์