10/09/2024
COMPONENT TRONG ANGULAR (PHẦN 2)
Ở phần trước, chúng ta đã tìm hiểu về các kiến thức cơ bản trong Angular component. Trong phần này, chúng ta sẽ đi sâu hơn vào những khái niệm nâng cao giúp bạn làm chủ cách xây dựng và tối ưu hóa component trong Angular.
1. Lifecycle Hooks (Các vòng đời của component)
Lifecycle hooks cho phép bạn can thiệp vào các giai đoạn khác nhau trong vòng đời của một component. Điều này đặc biệt hữu ích khi bạn cần thực hiện những công việc như khởi tạo dữ liệu, cập nhật giao diện hoặc dọn dẹp tài nguyên.
Các hooks phổ biến:
a. ngOnInit():
Cách hoạt động: Được gọi một lần duy nhất sau khi Angular đã khởi tạo tất cả các property .
Sử dụng khi nào: Dùng để khởi tạo dữ liệu hoặc gọi các API khi component được tạo.
b. ngOnChanges(changes: SimpleChanges):
Cách hoạt động: Được gọi khi có sự thay đổi giá trị của bất kỳ property nào trong component.
Sử dụng khi nào: Khi cần xử lý logic khi dữ liệu từ component cha thay đổi.
c. ngDoCheck():
Cách hoạt động: Được gọi khi Angular thực hiện change detection, cho phép bạn kiểm tra các thay đổi mà ngOnChanges không thể nhận diện.
Sử dụng khi nào: Khi cần thực hiện kiểm tra thay đổi tùy chỉnh mà Angular không thể tự động bắt được.
d. ngAfterViewInit():
Cách hoạt động: Được gọi sau khi view của component và tất cả các view con của nó đã được khởi tạo.
Sử dụng khi nào: Thường dùng để thao tác với DOM hoặc khởi tạo các thành phần con sau khi view đã được render.
e. ngOnDestroy():
Cách hoạt động: Được gọi ngay trước khi component bị hủy.
Sử dụng khi nào: Dùng để dọn dẹp tài nguyên, chẳng hạn như hủy các subscription hoặc giải phóng bộ nhớ.
2. Component Interaction (Giao tiếp giữa các component)
Trong ứng dụng Angular, các component thường cần trao đổi dữ liệu với nhau. Có nhiều cách để thực hiện điều này tùy thuộc vào mối quan hệ giữa các component.
Cách giao tiếp giữa các component:
a. () và ():
- (): Cho phép component nhận dữ liệu từ component cha.
- (): Dùng để phát sự kiện từ component con lên component cha bằng EventEmitter.
b. ViewChild và ContentChild:
- ViewChild: Lấy tham chiếu đến một thành phần con hoặc phần tử DOM sau khi view đã được render.
- ContentChild: Được sử dụng để tham chiếu đến các phần tử được chèn từ bên ngoài vào qua ng-content.
c. Service (Dependency Injection):
Sử dụng service để chia sẻ dữ liệu và logic giữa các component.
Thông qua dependency injection, Angular sẽ cung cấp instance của service cho các component có nhu cầu sử dụng chung dữ liệu.
3. Dynamic Components (Component động)
Angular cho phép bạn tạo và thêm các component vào DOM một cách động, hữu ích khi cần tạo giao diện linh hoạt, ví dụ như mở các modal hoặc popup.
4. Content Projection (Nguyên lý chèn nội dung)
Content projection cho phép bạn chèn nội dung từ component cha vào một component con, giúp tăng khả năng tái sử dụng component.
- : Được sử dụng để chèn nội dung từ bên ngoài vào component.
- Multi-slot projection:
Cho phép chèn nhiều đoạn nội dung vào các vị trí khác nhau trong component.
5. Optimizing Components (Tối ưu hóa component)
Trong Angular, việc tối ưu hóa component giúp cải thiện hiệu suất và giảm thiểu số lần re-render không cần thiết.
a. Pure vs Impure Pipes:
- Pure Pipes: Chỉ được gọi lại khi giá trị đầu vào thay đổi (dựa trên tham chiếu). Tối ưu hiệu suất tốt hơn.
- Impure Pipes: Được gọi lại trong mỗi lần change detection. Thường dùng cho các dữ liệu thay đổi liên tục như danh sách động.
b. TrackBy trong ngFor:
TrackBy cho phép Angular theo dõi danh sách dữ liệu tốt hơn, giúp ngăn việc re-render toàn bộ danh sách khi chỉ có một phần tử thay đổi.
c. Lazy Loading:
Lazy loading cho phép tải các component hoặc module chỉ khi chúng cần thiết, giúp giảm tải lượng tải ban đầu của ứng dụng.