Component trong angular là bài hướng dẫn cách tạo component, truyền tham số giữa các component, vòng đời component trong Angular
- Giới thiệu component trong Angular
- Tạo component trong angular
- Nhúng component con vào cha
- Nhúng component con và truyền tham số
- Component cha lắng nghe sự kiện từ con
Giới thiệu component trong Angular
Mỗi ứng dụng Angular là một tập hợp nhiều component, bởi vậy sử dụng component rất quan trọng. Khi tạo mới 1 project, Angular đã tạo sẵn cho bạn 1 component gốc có tên là AppComponent (đặt trong folder src/app). Sau đó thì bạn có thể tạo các component khác trong ứng dụng web của mình.
Một component trong Angular bao gồm 3 file chính: file template , file class và file định dạng css. Template còn gọi là view – là nơi bạn code html và hiển thị dữ liệu (trong class). Class là file .ts viết bằng ngôn ngữ typescript – nơi định nghĩa các hàm, khai báo và gán giá trị cho các biến, thực hiện xử lý, tính toán… Còn css là file định dạng cho những gì hiển thị trong view.
AppComponent có sẵn, là component gốc, ở cấp cao nhất. Bạn có thể tạo nhiều component khác cho ứng dụng của mình. Ví dụ component Đăng nhập, component Đăng ký, coponent Chi tiết sản phẩm, component Bình luận, Liên Hệ, Giới thiệu…tùy nhu cầu. Trong mỗi component, file .ts là file coding chính.
Tạo component trong angular
Để tạo component trong angular, dùng 1 trong 2 lệnh như sau:
ng generate component TênComponent
ng g c TênComponent
Lệnh sẽ thực hiện các việc sau:
- Tạo một folder con trong app để chứa component
- Lệnh cũng tạo file <tên>.component.ts, đây là file chính của component. Trong đây có định nghĩa selector (giống như id của component), địa chỉ file view, file css, lệnh import các thứ bên ngoài vào, khai báo biến, hàm dùng trong component.
- File <tên>.component.html : là file view, nơi bạn sẽ đặt mã html và hiện giá trị các biến.
- File <tên>.component.css : là file chứa định dạng css cho các tag trong view.
- File dùng cho mục đích test cũng được tạo, có tên file là <tên>.component.spec.ts
Ví dụ để tạo component có tên là home , bạn chạy chạy lệnh sau trong folder project: ng g c home
File chính của component là home.component.ts có nội dung như hình dưới.
File home.component.html khi mới tạo xong có nội dung đơn giản như hình sau. Đó chỉ là demo, Bạn có thể xóa để nhập code html, data , js thoải mái theo ý mình.
Nhúng component con vào cha
Việc nhúng 1 component con vào component cha trong Angular là việc thường hay làm. Ví dụ để nhúng component con home vào component cha là app, bạn thực hiện hai bước :
- Mở component cha (app.component.ts) và import component con vào (tất nhiên phải tạo component con trước)
- Kế đó mở view của component cha (app.component.html) . Dùng selector của component con để nhúng nó vào:
Nhúng component con và truyền tham số
Khi nhúng component con vào cha, bạn cũng có thể truyền data cho nó. Ví dụ trong component cha app có 2 biến tensp1 và giasp1. Truyền data vào component con home thực hiện qua các bước như sau:
- Trong component cha , định nghĩa các biến và import compoment con
- Trong view của component cha, dùng selector của con để nhúng và truyền data
- Trong coponent con (home.component.ts), dùng hàm Input để nhận giá trị từ cha truyền vào.
- Lúc này trong component con có thể thoãi mái sử dụng biến ten và gia vì giá trị của chúng đã được truyền từ cha vào.
Component cha lắng nghe sự kiện từ con
Khi nhúng component con vào cha, thế nào bạn cũng có nhu cầu này: đón các sự kiện xảy ra trong các component con, ví dụ khi user click 1 nút, keyup gõ 1 phím, change – khi user chọn 1 mục trong tag select… Mời xem ví dụ sau:
- Component cha app nhúng component con là home, đồng thời khai báo rằng: khi trong component con có sự kiện gui_gia_tri thì chạy hàm nhan_gia_tri
- Hàm nhan_gia_tri khai báo trong component cha, sẽ chạy khi có sự kiện gui_gia_trị xảy ra trong componnent con home.
- Trong component con home, tạo 1 đối tượng EventEmitter với tên gì cũng được (gui_gia_tri). Và gọi hàm emit của nó để tạo sự kiện. Chú ý là để sự kiện tạo ra có thể gửi được ra cha thì bạn thêm hàm Output cho nó nhe. (decodator Output có sẵn trong Angular)
- Lúc này trong view của component con chỉ việc tạo giao diện, gọi hàm để bắn sự kiện , component cha sẽ nhận được.
Xem kết quả:
Những vấn đề cần biết về component trong angular chưa hết đâu. Nhưng thôi mệt rồi phải không. Nghỉ hé. Vòng đời component trong Angular, routing cho component…và nhiều thứ khác về component đang chờ bạn phía trước 🙂 Cỏn muốn xem thêm để tham khảo thì đây, khe khe : https://angular.io/guide/component-overview , https://angular.io/api/core/Component
