Tiếp theo bài 1, hôm nay chúng ta sẽ tìm hiểu về các thành phần trong angular vậy

Component là gì: là một lớp được xác định cho bất kỳ thành phần hoặc điều khiển hiển thị nào trên màn hình. Mỗi lớp thành phần có một số thuộc tính và bằng cách sử dụng chúng, chúng ta có thể thao tác hành vi hoặc giao diện của phần tử trên màn hình. Vì vậy, chúng ta có thể tạo, cập nhật hoặc hủy các thành phần của riêng mình theo yêu cầu ở bất kỳ giai đoạn nào của ứng dụng. Nhưng trong TypeScript, một thành phần về cơ bản là một lớp TypeScript được trang trí bằng một trình trang trí @Component (). Từ quan điểm HTML, một thành phần là thẻ HTML tùy chỉnh do người dùng xác định có thể được hiển thị trong trình duyệt để hiển thị bất kỳ loại phần tử UI nào cùng với một số logic nghiệp vụ.

import { Component } from '@angular/core';  
  
@Component({  
  selector: 'app-root',  
  templateUrl: './app.component.html',  
  styleUrls: ['./app.component.css']  
})  
export class AppComponent {  
  title = 'Welcome to Angular 8 Learning Series...';  
} 

Tại sao cần Kiến trúc dựa trên thành phần?

Theo xu hướng hiện nay trong phát triển ứng dụng web, kiến trúc dựa trên thành phần sẽ đóng vai trò là kiến trúc có thể sử dụng nhất trong phát triển web trong tương lai. Bởi vì, với sự trợ giúp của kỹ thuật này, chúng tôi có thể giảm cả thời gian phát triển và chi phí với khối lượng lớn trong bất kỳ dự án phát triển web quy mô lớn nào. Đó là lý do tại sao các chuyên gia kỹ thuật hiện khuyên bạn nên thực hiện kiến trúc này trong phát triển ứng dụng dựa trên web. Vì vậy, trước khi đi thảo luận sâu về các thành phần, hãy thảo luận về lý do tại sao kiến trúc dựa trên thành phần này là cần thiết cho sự phát triển dựa trên web.

  • Reusability: Các frameworks dựa trên thành phần hữu ích hơn nhiều do các tính năng tái sử dụng của nó trong quá trình phát triển. Trong frameworks này, các thành phần là các đơn vị chi tiết nhất trong quá trình phát triển và việc phát triển với các thành phần cho phép chúng ta cung cấp khả năng tái sử dụng trong các chu kỳ phát triển trong tương lai. Vì vậy, nếu chúng ta phát triển một ứng dụng theo định dạng dựa trên thành phần, thì chúng ta có thể trao đổi các thành phần tốt nhất trong và ngoài. Một cách tiếp cận kiến trúc dựa trên thành phần cho phép ứng dụng của bạn cập nhật theo thời gian thay vì xây dựng lại từ đầu.
  • Increase Development Speed : Phát triển dựa trên thành phần luôn hỗ trợ phát triển dựa trên phương pháp nhanh. Các thành phần có thể được lưu trữ trong một thư viện mà nhóm có thể truy cập, tích hợp và sửa đổi trong suốt quá trình phát triển. Theo nghĩa rộng, mọi nhà phát triển đều có các kỹ năng chuyên biệt. Ví dụ, một người nào đó có thể là một chuyên gia về JavaScript, một người khác về CSS, v.v. Với khung này, mọi nhà phát triển chuyên ngành có thể đóng góp để phát triển một thành phần thích hợp.
  • Easy Integration: Chúng ta có thể phát triển kho lưu trữ thư viện liên quan đến thành phần. Kho lưu trữ thành phần này có thể được sử dụng làm kho lưu trữ mã tập trung cho sự phát triển hiện tại cũng như sự phát triển mới . Là kho lưu trữ mã tập trung khác, chúng tôi có thể duy trì thư viện này trong bất kỳ kiểm soát nguồn nào. Theo cách này, chúng ta có thể truy cập vào các kho lưu trữ đó và có thể được cập nhật với các tính năng hoặc chức năng mới theo yêu cầu mới và đệ trình phê duyệt thông qua quy trình riêng của họ.
  • Optimize Requirement and Design: Chúng ta có thể sử dụng thư viện thành phần làm nguồn tham chiếu thành phần UI,vì vậy sử dụng các thành viên nhóm phân tích nguồn này như người quản lý sản phẩm, phân tích kinh doanh hoặc lãnh đạo kỹ thuật cần dành ít thời gian hơn để hoàn thiện thiết kế UI cho các yêu cầu mới của họ. Bởi vì họ đã có một loạt các thành phần được thử nghiệm đầy đủ với chức năng đầy đủ. Chỉ cần họ quyết định quá trình về các điểm nâng cao bao gồm logic kinh doanh mới mà thôi. Theo cách này, frameworks dựa trên thành phần này cung cấp tốc độ nhanh hơn cho vòng đời của quá trình phát triển.
  • Lower Maintenance Costs: Do frameworks dựa trên thành phần hỗ trợ khả năng sử dụng lại, nên frameworks này giảm yêu cầu của tổng số nhà phát triển khi chúng ta muốn tạo một ứng dụng mới. Các thành phần dựa trên logic thường không có ngữ cảnh và các thành phần dựa trên giao diện người dùng luôn đi kèm với UX và UI . Vì vậy, chúng ta giờ đây có thể tập trung vào việc tích hợp các thành phần đó trong ứng dụng và cách thiết lập kết nối giữa các loại thành phần này. Ngoài ra, các thuộc tính hệ thống khác như bảo mật, hiệu suất, khả năng bảo trì, độ tin cậy và khả năng mở rộng, (thường được gọi là các yêu cầu phi chức năng hoặc NFR) cũng có thể được kiểm tra.

@Component Metadata:

Trong Angular, khi chúng ta muốn tạo bất kỳ thành phần mới nào, chúng ta cần sử dụng tr @Component. @Component về cơ bảnlà một lớp TypeScript làm đối tượng thành phần. Trên thực tế, @Component là một hàm có các loại tham số khác nhau. Trong  @Component, chúng ta có thể đặt các giá trị của các thuộc tính khác nhau để hoàn thiện hoặc thao tác hành vi của các thành phần. Các thuộc tính được sử dụng phổ biến nhất của @Component như sau:

  • selector : Một thành phần có thể được sử dụng bởi biểu thức chọn.
  • template: là một phần của thành phần được hiển thị trong trình duyệt.
  • templayeUrl: là một cách khác để hiển thị các thẻ HTML trong trình duyệt. Thuộc tính này luôn chấp nhận tên tệp HTML với đường dẫn tệp liên quan. Đôi khi nó được gọi là mẫu bên ngoài. Việc sử dụng thuộc tính này tốt hơn nhiều khi chúng tôi muốn thiết kế bất kỳ giao diện người dùng phức tạp nào trong thành phần.
  • moduleId: được sử dụng để giải quyết đường dẫn liên quan của templaye Url hoặc URL kiểu cho các đối tượng thành phần. Nó chứa Id của các mô-đun liên quan trong đó thành phần được đính kèm hoặc được gắn thẻ.
  • styles / stylesUrls: cung cấp các file css hoặc các đường dẫn chứa file css.
  • providers : Trong ứng dụng thực tế, chúng ta cần sử dụng hoặc tiêm các loại dịch vụ tùy chỉnh khác nhau trong thành phần để triển khai logic nghiệp vụ cho thành phần. Để sử dụng bất kỳ dịch vụ nào do người dùng định nghĩa trong thành phần, chúng tôi cần cung cấp phiên bản dịch vụ trong nhà cung cấp. Về cơ bản, thuộc tính nhà cung cấp luôn được cho phép giá trị kiểu mảng. Để chúng ta có thể xác định nhiều tên đối tượng dịch vụ có thể được cung cấp bằng cách phân tách dấu phẩy trong thuộc tính này tại một thời điểm.
import { Component } from '@angular/core';  
  
@Component({  
  selector: 'app-root',  
  template: 'Welcome to Angular 8 Learning Series...'  
})  
export class AppComponent {  
}  

Bây giờ, trong ví dụ dưới đây, chúng ta sẽ trình bày cách sử dụng các thuộc tính trang trí @Component khác như templateUrls:

import { Component } from '@angular/core';  
  
@Component({  
  moduleId: module.id,  
  selector: 'app-root',  
  templateUrl: './app.component.html'  
})  
export class AppComponent {  
  title = 'Welcome to Angular 8 Learning Series...';  
}  

Vì vậy, trong ví dụ trên, chúng tôi sẽ tách tệp HTML để lưu trữ phần HTML liên quan đến các thành phần. Theo ví dụ trên, chúng ta cần đặt cả tệp TypeScript và tệp HTML vào cùng một vị trí. Nếu chúng ta muốn đặt HTML vào một thư mục riêng, thì chúng ta có thể sử dụng tệp đó trong trình trang trí thành phần bằng cách sử dụng đường dẫn tệp tương đối.

Vòng đời của Component:

  • ngOnChanges : Sự kiện này thực thi mỗi khi thay đổi giá trị của điều khiển đầu vào trong thành phần. Sự kiện này kích hoạt đầu tiên khi giá trị của một tài sản ràng buộc đã được thay đổi.
  • ngOnInit : Sự kiện này được thực hiện tại thời điểm khởi tạo Thành phần. Sự kiện này chỉ được gọi một lần, ngay sau các sự kiện ngOnChanges (). Sự kiện này chủ yếu được sử dụng để khởi tạo dữ liệu trong một thành phần.
  • ngDoCheck :Sự kiện này được thực hiện mỗi khi các thuộc tính đầu vào của một thành phần được kiểm tra. Chúng ta có thể sử dụng phương pháp vòng đời này để thực hiện kiểm tra các giá trị đầu vào theo kiểm tra logic của chính chúng ta.
  • ngAfterContentInit : Phương pháp vòng đời này được thực thi khi Angular thực hiện bất kỳ phép chiếu nội dung nào trong các khung nhìn thành phần. Phương thức này chỉ thực hiện một lần khi tất cả các ràng buộc của thành phần cần được kiểm tra lần đầu tiên. Sự kiện này thực thi ngay sau phương thức ngDoCheck ().
  • ngAfterContentChecked : Phương pháp móc vòng đời này thực thi mỗi khi nội dung của thành phần được kiểm tra bởi cơ chế phát hiện thay đổi của Angular. Phương thức này được gọi sau phương thức ngAfterContentInit (). Phương thức này cũng có thể được thực thi trên mỗi lần thực hiện sự kiện ngDoCheck ().
  • ngAfterViewInit : Phương thức vòng đời này thực thi khi thành phần hoàn thành hiển thị toàn bộ khung nhìn của nó. Phương pháp vòng đời này được sử dụng để khởi tạo chế độ xem thành phần và các khung nhìn con. Nó chỉ được gọi một lần, sau ngAfterContentChecked (). Phương pháp móc vòng đời này chỉ áp dụng cho các thành phần.
  • ngAfterViewChecked : Phương thức này luôn được thực thi sau phương thức ngAterViewInit (). Về cơ bản, phương pháp vòng đời này được thực hiện khi thuật toán phát hiện thay đổi của thành phần góc xảy ra. Phương thức này tự động thực hiện mọi thời gian thực hiện của ngAfterContentChecked ().
  • ngOnDestroy : Phương thức này sẽ được thực thi khi chúng ta muốn phá hủy các thành phần Angular. Phương pháp này rất hữu ích cho việc hủy đăng ký quan sát và tách các trình xử lý sự kiện để tránh rò rỉ bộ nhớ. Nó được gọi ngay trước khi thể hiện của thành phần bị phá hủy. Phương thức này chỉ được gọi một lần, ngay trước khi thành phần được xóa khỏi DOM.

Đây là tất cả nội dung của component,bài tiếp theo sẽ là các ví dụ của component nhé.

Bài này hơi lý thuyết một tí mọi người chịu khó đọc, nội dung này mình có tham khảo một số website nước ngoài để viết. Cảm ơn các bạn đã đọc