Tìm hiểu về Component trong Angular

Trong bài viết trước, mình đã có những giải thích cơ bản về một Component trong Angular là gì, có chức năng gì. Trong bài viết này, mình sẽ đi kỹ hơn về Component trong Angular các bạn nhé!

Đầu tiên, mình sẽ tạo một Angular project để làm ví dụ:

Tìm hiểu về Component trong Angular

Trong Angular thì một Component là một phần HTML trong toàn bộ nội dung HTML mà chúng ta cần xây dựng cho ứng dụng của chúng ta. Ví dụ, các bạn có một trang HTML như sau:

thì các bạn có thể xây dựng một Component cho toàn bộ trang này, hoặc chia nhỏ nó ra thành nhiều Component cho từng thẻ <div> cũng được.

Trong project mà mình vừa tạo thì class AppComponent trong tập tin src/app/app.component.ts là một Component trong Angular đấy các bạn ạ. Nội dung của class này như sau:

Một class Component trong Angular sẽ được khai báo với decorator @Component và có 2 thuộc tính quan trọng trong số 3 thuộc tính của decorator này, bắt buộc phải có là selector và templateUrl.



Thuộc tính selector dùng để khai báo thẻ HTML mà Component này sẽ thay thế nội dung trong ứng dụng Angular của chúng ta.

Chúng ta có 3 cách để khai báo thuộc tính selector này. Cách đầu tiên thì như mặc định các bạn thấy, chúng ta sẽ định nghĩa một thẻ HTML và khai báo giá trị của thẻ đó trong thuộc tính selector. Cách thứ hai là chúng ta sẽ định nghĩa thuộc tính class của một thẻ HTML bất kỳ với giá trị của thuộc tính của class này được khai báo trong thuộc tính selector của decorator @Component. Ví dụ, mình có thể sửa lại thuộc tính selector của decorator @Component trong AppComponent như sau:

Khi đó, mình cần sửa lại tập tin index.html trong thư mục home của project như sau:

Kết quả vẫn tương tự.

Cách thứ ba mà các bạn có thể làm là khai báo một thuộc tính mới cho một thẻ HTML bất kỳ rồi khai báo thuộc tính đó trong thuộc tính selector của decorator @Component với dấu ngoặc vuông như sau:

index.html:

app.component.ts:




Thuộc tính templateUrl sẽ định nghĩa đường dẫn tới nội dung HTML mà Component này sẽ xây dựng.

Nếu các bạn đang xây dựng Component này với ít nội dung HTML thì có thể sử dụng thuộc tính template thay vì templateUrl để định nghĩa trực tiếp nội dung HTML này vào Component luôn.

Ví dụ như:

Nếu các bạn chỉ khai báo một dòng cho nội dung HTML thì có khai báo chúng bên trong dấu nháy đơn “‘”, nếu khai báo nhiều dòng thì chúng ta sẽ sử dụng dấu “`” thay vì dấu nháy đơn “‘” để khai báo nội dung HTML các bạn nhé!



Thuộc tính styleUrls trong ví dụ của chúng ta dùng để định nghĩa các tập tin CSS để chỉnh sửa style cho Component này.

Nó không bắt buộc vì chúng ta có thể định nghĩa một tập tin CSS chung cho toàn bộ ứng dụng Angular.

Các bạn cũng có thể định nghĩa CSS trong tập tin của Component luôn, sử dụng thuộc tính styles thay vì thuộc tính styleUrls. Ví dụ như mình có thể định nghĩa style cho thẻ <h1> trong tập tin app.component.html như sau:

Kết quả:

Tìm hiểu về Component trong Angular

Trong class AppComponent, như các bạn thấy, nó định nghĩa một biến title.

Biến này ban đầu dùng để thay thế placeholder {{title}} trong tập tin app.component.html:




Giả sử bây giờ mình cần build trang HTML sau:

Mình sẽ thay thế nội dung của tập tin app.component.html thành nội dung trên rồi revert lại AppComponent như sau:

Khi đó chạy lại ứng dụng, mình sẽ thấy kết quả như sau:

Tìm hiểu về Component trong Angular

Nếu bây giờ, mình muốn chia nội dung trên thành 2 Components khác nhau. Một cho:

và một cho:

thì mình sẽ làm như sau:

Đầu tiên, mình sẽ tạo ra 4 tập tin có tên là h1.component.html, h1.component.ts, p.component.html và p.component.ts trong thư mục src/app như sau:

Tìm hiểu về Component trong Angular

Nội dung của tập tin h1.component.html sẽ được lấy từ tập tin app.component.html như sau:

còn nội dung của tập tin p.component.html sẽ như sau:

Nội dung của tập tin app.component.html lúc này chúng ta sẽ thay thế bằng các selector như sau:

Bây giờ, chúng ta sẽ thêm 2 Component class là PComponent và H1Component trong các tập tin p.component.ts và h1.component.ts. Nội dung của chúng như sau:

PComponent

H1Component:

Sau đó, chúng ta cần khai báo 2 Component này vào AppModule:

Chạy lại ứng dụng, các bạn cũng thấy kết quả tương tự.

5/5 - (1 bình chọn)

Add Comment