Component & Template

Mục lụcCopy Anchor Link

• Bạn sẽ học được gì
• Kiến thức đầu vào
• Bản đồ tư duy
• Lộ trình học theo thứ tự
  • Chặng 1: tạo đơn vị giao diện
  • Chặng 2: kết nối dữ liệu và tương tác
  • Chặng 3: tổ chức template theo trạng thái
  • Chặng 4: ghép và tái sử dụng component
  • Chặng 5: hoàn thiện vòng đời và giao diện
• Lộ trình thực hành
• Nguyên tắc học hiệu quả
• Đi tiếp sau nhóm này
• Tóm tắt

Bạn sẽ học được gìCopy Anchor Link

Component là đơn vị đóng gói một phần giao diện cùng dữ liệu và hành vi của nó. Template là phần HTML mở rộng của Angular: ngoài thẻ HTML, template có thể đọc dữ liệu của component, lắng nghe sự kiện và quyết định phần tử nào được hiển thị.

Nhóm bài này giúp bạn trả lời năm câu hỏi thực tế khi xây dựng UI:

• Tách một màn hình thành các component ở ranh giới nào?
• Làm sao đưa dữ liệu từ TypeScript ra HTML, rồi nhận thao tác từ người dùng?
• Hiển thị danh sách, trạng thái rỗng và trạng thái đang tải như thế nào?
• Làm sao để component cha và component con hợp tác mà không phụ thuộc quá chặt?
• Khi nào nên dùng lifecycle hook, content projection và CSS cục bộ?

Kiến thức đầu vàoCopy Anchor Link

Bạn nên hoàn thành hoặc ít nhất nắm được các phần sau trước khi bắt đầu:

• TypeScript cơ bản: biến, hàm, class, interface, import và export.
• HTML/CSS cơ bản: phần tử, thuộc tính, biểu mẫu, selector và box model.
• Cấu trúc một ứng dụng Angular: nơi đặt mã nguồn, lệnh chạy ứng dụng và cách Angular tổ chức workspace.

Nếu chưa vững cả ba phần, hãy đọc chúng trước. Bạn không cần thuộc mọi API; mục tiêu là có thể đọc một component nhỏ và đoán được dữ liệu đi từ đâu đến đâu.

Bản đồ tư duyCopy Anchor Link

Một thao tác quen thuộc, chẳng hạn người dùng bấm nút tăng số lượng trong một thẻ sản phẩm, đi qua các phần kiến thức của nhóm này theo luồng sau:

direction: right

click: "Người dùng bấm Thêm" {
  width: 176
  height: 58
}

child: "Template con\nPhát sự kiện" {
  width: 130
  height: 58
}

parent: "Component cha\nCập nhật state" {
  width: 136
  height: 58
}

template: "Template hiển thị\nDanh sách / tổng" {
  width: 160
  height: 58
}

flow: "@if, @for\nQuyết định UI" {
  width: 130
  height: 58
}

boundary: "input / output\nGiữ ranh giới rõ" {
  width: 152
  height: 58
}

click -> child -> parent -> template
parent -> boundary
template -> flow

Ở đây, data binding nối trạng thái với template. Control flow quyết định UI nào tồn tại. Giao tiếp component giữ cho từng phần UI có trách nhiệm riêng. Những bài sau bổ sung cách khởi tạo, tái sử dụng, theo dõi vòng đời và tạo kiểu cho các phần đó.

Lộ trình học theo thứ tựCopy Anchor Link

Đi theo thứ tự dưới đây để mỗi khái niệm mới đều dựa trên một kỹ năng vừa học. Mỗi bài có thể đọc độc lập, nhưng đảo thứ tự thường khiến bạn phải dùng API trước khi hiểu vấn đề nó giải quyết.

Chặng 1: tạo đơn vị giao diệnCopy Anchor Link

1. Standalone component — bắt đầu từ cấu trúc component, @Component metadata, template, style và imports. Đây là nền để hiểu Angular biết một phần UI gồm những gì.
2. Selector và host element — hiểu vì sao <app-header> tồn tại trong DOM, template được render vào đâu và khi nào host ảnh hưởng semantic HTML hoặc layout.
3. Tạo một ProductCardComponent tối giản. Component chỉ nhận một sản phẩm tĩnh và hiển thị tên, giá, ảnh thay thế.

Mốc hoàn thành: bạn tạo được một standalone component, biết phân biệt selector/host/template, import được dependency cần thiết và dùng được component đó trong template khác.

Chặng 2: kết nối dữ liệu và tương tácCopy Anchor Link

1. Data binding — học interpolation, property binding, event binding và two-way binding. Đây là bốn cách cơ bản để dữ liệu đi giữa class và template.
2. Thay dữ liệu tĩnh bằng thuộc tính của component. Thêm nút yêu thích, ô tìm kiếm hoặc bộ đếm số lượng để quan sát dữ liệu thay đổi trên màn hình.

Mốc hoàn thành: bạn phân biệt được {{ value }}, [property], (event) và [(ngModel)]; đồng thời chọn được cú pháp theo chiều dữ liệu cần đi.

Chặng 3: tổ chức template theo trạng tháiCopy Anchor Link

1. Control flow — dùng @if, @for và @switch để biểu diễn các trạng thái giao diện một cách rõ ràng.
2. ng-template, TemplateRef và NgTemplateOutlet — hiểu khi nào một template cần được render trễ, render nhiều lần hoặc nhận context do component khác cung cấp.
3. Hiển thị danh sách sản phẩm. Bổ sung trạng thái không có kết quả và nhãn khác nhau theo tình trạng còn hàng.

Mốc hoàn thành: template không còn phụ thuộc vào việc sao chép HTML cho từng trường hợp. Bạn có thể nhìn vào trạng thái và dự đoán phần UI sẽ xuất hiện, đồng thời chọn được ng-template thay vì control flow hoặc projection khi thật sự cần.

Chặng 4: ghép và tái sử dụng componentCopy Anchor Link

1. Giao tiếp giữa component — truyền dữ liệu xuống component con và đưa sự kiện lên component cha; sau đó nhận biết khi nào nên dùng một kênh dùng chung cho các component xa nhau.
2. Content projection — dùng ng-content để component vỏ nhận nội dung do nơi sử dụng quyết định, thay vì tạo nhiều biến thể gần giống nhau.
3. Tách màn hình danh sách thành ProductList, ProductCard và CartSummary. Sau đó tạo một PanelComponent có vùng header và body bằng content projection.

Mốc hoàn thành: component con không tự sửa trực tiếp trạng thái thuộc component cha. Bạn tái sử dụng được một component khung mà vẫn thay đổi được nội dung bên trong.

Chặng 5: hoàn thiện vòng đời và giao diệnCopy Anchor Link

1. Lifecycle hooks — hiểu các thời điểm Angular tạo, kiểm tra, cập nhật và hủy component; chỉ đặt công việc vào hook khi đúng thời điểm.
2. Styling component — tổ chức style cục bộ, style toàn cục và view encapsulation để giao diện không vô tình ảnh hưởng lẫn nhau.
3. Thêm trạng thái tải dữ liệu giả lập, kiểm tra lúc component nhận input hoặc bị hủy, rồi hoàn thiện responsive CSS cho màn hình đã tách component.

Mốc hoàn thành: bạn biết lý do của một hook trước khi dùng nó và có thể tìm đúng nơi đặt style khi CSS không áp dụng như mong đợi.

Lộ trình thực hànhCopy Anchor Link

Hãy xây dựng một danh sách sản phẩm có giỏ hàng nhỏ. Bài tập đủ nhỏ để hoàn thành trong vài buổi, nhưng buộc bạn sử dụng liên kết giữa các bài thay vì học từng API rời rạc.

1. Dựng khung: tạo ProductListComponent, ProductCardComponent và CartSummaryComponent dưới dạng standalone component. Mỗi component chỉ cần template tĩnh ở bước này.
2. Đưa state vào UI: khai báo mảng sản phẩm, số lượng đã chọn và từ khóa tìm kiếm. Dùng binding để hiển thị chúng và nhận sự kiện bấm nút.
3. Thể hiện mọi trạng thái: dùng @for cho danh sách, @if cho trạng thái rỗng và @switch nếu sản phẩm có nhiều trạng thái như in-stock, low-stock, out-of-stock.
4. Thiết kế ranh giới: để ProductCardComponent nhận dữ liệu và phát yêu cầu thêm vào giỏ. CartSummaryComponent chỉ hiển thị dữ liệu mà cha cung cấp. Component cha sở hữu state của trang.
5. Tái sử dụng khung UI: tạo PanelComponent chứa ng-content, sau đó bọc danh sách và giỏ hàng bằng cùng khung nhưng nội dung khác nhau.
6. Rà soát: thêm style cục bộ cho card, style dùng chung cho ứng dụng nếu cần, và chỉ dùng lifecycle hook khi có tình huống cụ thể để kiểm chứng.

Nguyên tắc học hiệu quảCopy Anchor Link

• Đọc rồi gõ lại ví dụ. Template có nhiều ký hiệu ngắn; tự viết giúp bạn nhận ra dấu ngoặc nào là binding, event hay control flow.
• Thay đổi một biến mỗi lần. Ví dụ, trước tiên đổi dữ liệu hiển thị, sau đó mới thêm sự kiện. Cách này giúp xác định lỗi nằm ở state, binding hay template.
• Đặt tên theo trách nhiệm UI. CartSummaryComponent nói rõ vai trò hơn một component tên CommonComponent. Tên tốt làm ranh giới tái sử dụng rõ hơn.
• Để dữ liệu thuộc nơi hiểu nó nhất. State của cả trang nên ở component cha hoặc lớp state phù hợp. Component con nhận dữ liệu và báo ý định của người dùng.
• Kiểm tra trên giao diện. Mỗi chặng nên có một thay đổi nhìn thấy được: text đổi, nút phản hồi, danh sách lọc hoặc layout hiển thị đúng.

Đi tiếp sau nhóm nàyCopy Anchor Link

Khi đã tách được UI thành component và quản lý template rõ ràng, bạn có thể chọn hướng đi tiếp theo theo nhu cầu ứng dụng:

Tóm tắtCopy Anchor Link

Component và template là nền của mọi giao diện Angular. Hãy học theo tuyến: tạo standalone component, nối dữ liệu bằng binding, biểu diễn trạng thái bằng control flow, rồi mới ghép component bằng giao tiếp và content projection. Lifecycle hooks cùng styling là bước hoàn thiện để UI vừa đúng hành vi vừa dễ bảo trì.

Kết quả cần đạt không phải là nhớ mọi cú pháp. Bạn cần có thể nhìn một yêu cầu giao diện, tách nó thành các component có trách nhiệm rõ ràng và mô tả giao diện từ state thay vì cập nhật DOM thủ công.