Angular - Component

​Component là gì?

​- Ứng dụng được dựng lên bởi nhiều component

​- Mỗi component đóng vai trò là một phần hiển thị nhỏ trong view (1 khối trên view ~ section)

​Ứng dụng tạo bởi những thành phần gì?

​- Thành phần ứng dụng

​- Layout: Html, Css

​- Tập hợp các component

​Các component được quản lý bởi...

​App Module

​Các thành phần của Component

​- Template: Layout, css, directive(hàm, công thức)

​- Metadata

​- Component class ( Logic, Property, Method )

​Cấu trúc của Component

​- File Class Component

​- File Html hiển thị view

​- File Css để trang trí

​- File spect.ts để viết các test case

​File Class Component

​Component sẽ có một Class để chúng ta liên kết với View. Các Class này được tạo ra bằng TypeScript. Class có chứa và định nghĩa các thuộc tính và phương thức, cũng tương tự như định nghĩa Class của lập trình hướng đối tượng.

​File Html hiển thị view

• Template HTML khai báo những gì component hiển trị trên trang

  • Một mẫu (template) cái mà sẽ tạo ra giao diện (layout view) cho người dùng, template này được tạo ra từ HTML. Trên trang HTML này, chúng ta sẽ sử dụng Angular Binding và Directives để tăng sức mạnh cho View.

​Metadata

• Thành phần không thể thiếu của Component

• Cung cấp thông tin bổ sung cho Angular Component và giúp định nghĩa Class này như một Angular Component. Metadata được định nghĩa bởi một Decorator. Một decorator có thể hiểu đơn giản là phương thức thêm Metadata vào Class

​Vòng đời của Component

• Được quản lý bởi Angular

• ​Khởi tạo -> Render -> Khởi tạo và render các component con -> Ghi nhận thay đổi thuộc tính của nó -> Hủy khi không sử dụng

​Life Circle Hooks

• ​"Mỏ neo" Mục đích và thời điểm của vòng đời Component

• ​Được tính từ lúc tạo ra, thay đổi và bị phá hủy

• ​Thứ tự

  • ​Contructor

  • ​ngOnChanges -> ngOnInit -> ngDoCheck -> ngAfterContentInit -> ngAfterContentChecked -> ngAfterViewInit -> ngAfterViewChecked -> ngOnDestroy