Angular 20: Control Flow Part 1 – @if là *ngIf mới (và tốt hơn!)
Lê Lân
0
Angular 20 Và Cuộc Cách Mạng Viết Template Với Control Flow Blocks
Mở Đầu
Angular 20 vừa ra mắt với một bước tiến đột phá trong cách viết template: cách mạng hóa cú pháp điều khiển luồng hiển thị nội dung. Nếu bạn là người dùng Angular lâu năm, chắc hẳn đã quen với các structural directive như *ngIf, *ngFor, hay [ngSwitch]. Thật bất ngờ khi chúng bị khai tử và thay thế bởi một hệ thống hoàn toàn mới mang tên Control Flow Blocks.
Trong bài viết này, chúng ta sẽ cùng khám phá chi tiết về Control Flow Blocks, bắt đầu với phần đầu tiên trong loạt bài: cách sử dụng các khối điều kiện (@if,
else
if,
else)
thay thế cho *ngIf truyền thống. Bạn sẽ hiểu được cách viết template sạch hơn, rõ ràng hơn, đồng thời tận dụng được sức mạnh của tính phản ứng (reactivity) thông qua signal trong Angular 20.
Angular 20 Giới Thiệu Control Flow Blocks
Control Flow Blocks Là Gì?
Control Flow Blocks là các khối lệnh mới trong Angular 20 nhằm thay thế hoàn toàn syntax cũ như *ngIf, *ngFor, và [ngSwitch]. Chúng mang đến:
Cú pháp sạch, rõ ràng, gần giống với JavaScript.
Khả năng biểu đạt logic điều kiện/ vòng lặp ở mức block thay vì attribute.
Tích hợp trực tiếp với hệ thống reactive signal mới của Angular.
Điều này giúp tăng đáng kể độ dễ đọc và quản lý template phức tạp tốt hơn so với cách viết trước đây.
Cú Pháp Mới Được Giới Thiệu
Cú pháp cũ
Cú pháp mới
Chức năng
*ngIf
@if
,
@else if
,
@else
Hiển thị điều kiện
*ngFor
@for
Vòng lặp
[ngSwitch]
,
[ngSwitchCase]
@switch
Điều kiện đa nhánh
Phần 1: Cách Sử Dụng
if,
else
if và
else
Cú Pháp Cơ Bản
@if (condition) {
<!-- Template cho trường hợp condition đúng -->
}
@elseif (condition2) {
<!-- Template cho điều kiện thứ hai -->
}
@else {
<!-- Template dự phòng nếu không thỏa điều kiện trên -->
}
Cú pháp này mô phỏng logic điều kiện quen thuộc của JavaScript, do đó rất thân thiện với lập trình viên.
Ví Dụ Cụ Thể: Hiển Thị Giao Diện Dựa Trên Vai Trò Người Dùng
Giả sử bạn có một ứng dụng với vai trò người dùng là ADMIN, DEVELOPER hoặc None. Tùy theo vai trò đăng nhập, giao diện sẽ hiển thị nội dung phù hợp.
Template (HTML):
<divclass="login-wrapper">
@if (loggedInRole() === 'ADMIN') {
<span>User logged in has ADMIN access</span>
}
@else if (loggedInRole() === 'DEVELOPER') {
<span>User logged in has DEVELOPER access</span>
}
@else {
<span>User logged in doesn't have any access</span>