Giới thiệu

Angular 20 đã chính thức từ bỏ các chỉ thị cấu trúc truyền thống như *ngIf, *ngFor và *ngSwitch. Thay vào đó, Angular 20 giới thiệu cú pháp điều khiển hiện đại gần gũi hơn với JavaScript và TypeScript. Trong bài viết này, chúng ta sẽ khám phá các cú pháp HTML mới trong Angular 20, giải thích cách chúng hoạt động và đưa ra các ví dụ di chuyển giúp bạn nhanh chóng thích nghi.

Tại sao có sự thay đổi?

Trong nhiều năm qua, Angular đã sử dụng các chỉ thị cấu trúc (*ngIf, *ngFor, *ngSwitch) để điều khiển DOM. Mặc dù mạnh mẽ, chúng có những hạn chế sau:

• Cú pháp khác với JS/TS chuẩn.
• Cần tiền tố * và bọc trong ng-template ẩn.
• Đọc khó hơn cho các mẫu phức tạp.

Cú pháp điều khiển kiểu block mới này khắc phục điều đó, giúp các mẫu Angular cảm thấy giống như việc viết mã thuần túy.

1. Render điều kiện với @if

Cách cũ (Đã ngừng sử dụng):

<div *ngIf="isLoggedIn; else guest">
  Chào mừng trở lại, {{ userName }}!
</div>
<ng-template #guest>
  <p>Vui lòng đăng nhập</p>
</ng-template>

Cách mới (Angular 20+):

@if (isLoggedIn) {
  <div>Chào mừng trở lại, {{ userName }}!</div>
} @else {
  <p>Vui lòng đăng nhập</p>
}

Lợi ích:

• Cú pháp sạch hơn.
• Không cần bọc thêm.
• Hỗ trợ else if cho nhiều điều kiện.

2. Lặp với @for

Cách cũ (Đã ngừng sử dụng):

<ul>
  <li *ngFor="let item of items; index as i; trackBy: trackByFn">
    {{ i+1 }}. {{ item }}
  </li>
</ul>

Cách mới (Angular 20+):

<ul>
  @for (item of items; track trackByFn(item); let i = $index) {
    <li>{{ i+1 }}. {{ item }}</li>
  }
</ul>

Lợi ích:

• Sử dụng cú pháp block, tương tự như vòng lặp for-of.
• Có sẵn các biến $index, $count, $first, $last.
• track thay thế trackBy với một hàm tự nhiên hơn.

3. Chuyển đổi trường hợp với @switch

Cách cũ (Đã ngừng sử dụng):

<div [ngSwitch]="role">
  <p *ngSwitchCase="'admin'">Quyền quản trị</p>
  <p *ngSwitchCase="'user'">Quyền người dùng</p>
  <p *ngSwitchDefault>Quyền khách</p>
</div>

Cách mới (Angular 20+):

@switch (role) {
  @case ('admin') {
    <p>Quyền quản trị</p>
  }
  @case ('user') {
    <p>Quyền người dùng</p>
  }
  @default {
    <p>Quyền khách</p>
  }
}

Lợi ích:

• Cấu trúc rõ ràng.
• Giống như một câu lệnh switch thực sự.
• Dễ quản lý nhiều trường hợp.

4. Di chuyển dễ dàng

Angular cung cấp một công cụ di chuyển để tự động cập nhật các mẫu của bạn:

ng update @angular/core --name=control-flow-migration

Công cụ này sẽ thay thế các cú pháp đã ngừng sử dụng (*ngIf, *ngFor, *ngSwitch) bằng các phiên bản hiện đại.

5. Ví dụ: Thành phần đầy đủ trong Angular 20

Dưới đây là một mẫu thành phần đơn giản sử dụng tất cả các cú pháp mới:

<h1>Bảng điều khiển người dùng</h1>

@if (isLoggedIn) {
  <p>Chào mừng, {{ userName }}</p>

  <ul>
    @for (task of tasks; let i = $index) {
      <li>{{ i+1 }}. {{ task }}</li>
    }
  </ul>

  @switch (role) {
    @case ('admin') {
      <button>Quản lý người dùng</button>
    }
    @case ('editor') {
      <button>Chỉnh sửa nội dung</button>
    }
    @default {
      <p>Quyền truy cập người dùng cơ bản</p>
    }
  }
} @else {
  <p>Vui lòng đăng nhập để truy cập bảng điều khiển của bạn.</p>
}

Lợi ích chính của cú pháp mới

• Sạch sẽ & Dễ đọc → Gần gũi với TypeScript thuần túy.
• Không còn tiền tố * → Không có bọc ng-template ẩn.
• Công cụ tốt hơn → Chẩn đoán biên dịch mạnh mẽ hơn và hỗ trợ trình soạn thảo tốt hơn.
• Tương lai bền vững → Cú pháp cũ đã ngừng sử dụng, đây là tiêu chuẩn mới.

Thực hành tốt nhất

• Sử dụng cú pháp mới để tối ưu hóa mã của bạn.
• Luôn kiểm tra khả năng tương thích với các phiên bản Angular mới hơn.

Những cạm bẫy thường gặp

• Bỏ qua các thông báo di chuyển từ Angular.
• Không sử dụng công cụ di chuyển có sẵn.

Mẹo hiệu suất

• Tối ưu hóa các hàm theo dõi trong vòng lặp để cải thiện hiệu suất.

Khắc phục sự cố

• Nếu cú pháp mới không hoạt động, hãy kiểm tra phiên bản Angular của bạn và đảm bảo rằng bạn đã chạy công cụ di chuyển.

Câu hỏi thường gặp (FAQ)

Cú pháp mới có khó học không?

Cú pháp mới gần giống với JavaScript, vì vậy nếu bạn đã quen thuộc với JavaScript hoặc TypeScript, bạn sẽ thấy nó dễ học hơn.

Làm thế nào để di chuyển từ cú pháp cũ sang cú pháp mới?

Bạn có thể sử dụng công cụ di chuyển mà Angular cung cấp để tự động cập nhật mã của mình.

Cú pháp mới có hỗ trợ cho các tính năng tương tự không?

Có, cú pháp mới hỗ trợ đầy đủ các tính năng tương tự như cú pháp cũ nhưng với cách viết rõ ràng hơn.