Tạo một Component Class
Nếu như các bạn đã biết qua về lập trình hướng đối tượng trong các ngôn ngữ như C#, Java, C++ thì việc tạo một class sẽ trông rất quen thuộc. Một class là một cấu trúc cho phép chúng ta tạo những thuộc tính(properties) được xác định bởi những kiểu dữ liệu (data type) và những phương thức (method) cung cấp những chức năng. Chúng ta định nghĩa một class sử dụng một từ khoá “class” và theo đó là tên của class. Thông thường Angular quy ước đặt tên mỗi component với một tên đặc trưng. Sau đó nối các thành phần như hậu tố “Component”. Ngoài ra, theo quy ước, Component gốc của ứng dụng được gọi là AppComponent như ví dụ trên. Tên class này được sử dụng như tên component khi các component được tham chiếu trong mã. Từ khoá “export” trước class làm cho component đó có thể được sử dụng bởi các component khác của ứng dụng. Và như chúng ta đã được học từ chương trước, file chứa mã bây giờ đã là một ES module. Nó sẽ được tải bởi module loader khác mà không cần thêm một script tag nữa. Bên trong phần thân của class có những thuộc tính và phương thức. Trong ví dụ này chúng ta chỉ có một thuộc tính và không có phương thức. Thuộc tính định nghĩa một phần tử dữ liệu của một class. Chúng ta bắt đầu với tên thuộc tính, theo quy ước là một danh từ mô tả phần tử dữ liệu và viết theo kiểu camelCase, theo đó chữ cái đầu tiên là chữ thường. Trong ví dụ này, nó là tiêu đề của một trang. Sử dụng Typescript’ s strong type, theo sau tên thuộc tính chúng ta sẽ thêm kiểu dữ liệu của nó. Chúng ta cũng có thể tuỳ chọn gán cho thuộc tính một giá trị ban đầu như trên ví dụ. Các phương thức thông thường được đặt trong thân của class và sau những thuộc tính. Tên phương thức thường là động từ mô tả hành động mà phương thức đó thực hiện. Những phương thức cũng được viết theo kiểu camelCase. Vậy đó là class, Nhưng một class không đủ để xác định một component. Chúng ta cần định nghĩa một template liên kết với component class này. Làm thế nào để chúng ta cung cấp những thông tin này cho Angular? Chúng ta sẽ theo dõi tiếp theo đây.
Last updated