Tệp với lớp thành phần trong Angular

Phần cốt lõi của bất kỳ thành phần nào là chức năng của nó, tức là chính chương trình của nó. Trong Angular, chức năng của thành phần được viết bằng ngôn ngữ TypeScript và đại diện cho một lớp OOP.

Trong mỗi thành phần, lớp này nằm trong tệp có phần mở rộng .ts. Trong thành phần chính của chúng ta, đây sẽ là tệp app.component.ts.

Hãy làm quen với nội dung của tệp này. Đầu tiên, hãy chú ý đến lớp của thành phần chúng ta:

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

Lớp này được áp dụng decorator @Component. Decorator này nhận một tham số là đối tượng, đối tượng này cấu hình thành phần của chúng ta:

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

Trong thuộc tính templateUrl, đường dẫn đến tệp chứa bố cục HTML của thành phần chúng ta được chỉ định.

Trong thuộc tính styleUrls, mảng đường dẫn đến các tệp CSS được chỉ định, các tệp này định kiểu cho bố cục của thành phần chúng ta. Như bạn thấy, có thể có không chỉ một tệp kiểu.

Trong thuộc tính selector, bộ chọn của thẻ HTML được chỉ định, nơi mã HTML của thành phần chúng ta sẽ được hiển thị (được gắn kết). Trong trường hợp của chúng ta, chúng ta thấy tên app-root. Tên này tương ứng với một thẻ cùng tên. Thẻ này được viết trong tệp bố cục src/index.html. Vào đúng vị trí nơi thẻ này được viết, bố cục của thành phần chúng ta sẽ được chèn vào.

Trong thuộc tính imports, các module được nhập vào thành phần của chúng ta được chỉ định.

Trong thuộc tính standalone, sẽ luôn được chỉ định giá trị true. Hiện tại, đây là một tính năng mang tính dịch vụ của Angular, vì vậy đừng đi sâu vào nó ngay bây giờ.

Mở tệp app.component.ts và nghiên cứu nó.

Tạo một vài tệp kiểu và kết nối chúng trong decorator.