Hiểu về @let trong Template Angular: Hướng dẫn hoàn chỉnh

Cú pháp template của Angular vốn đã rất mạnh mẽ — và với việc giới thiệu @let, cú pháp này trở nên gọn gàng và biểu đạt rõ ràng hơn nữa. Trong bài viết này, chúng ta sẽ khám phá @let là gì, cách sử dụng và một số ví dụ thực tế để bạn dễ dàng bắt đầu.

`@let` là gì?

@let cho phép bạn khai báo biến cục bộ trong template Angular, có thể tái sử dụng trong cùng phạm vi hoặc các phạm vi lồng nhau — tương tự như cách bạn sử dụng let trong JavaScript hoặc TypeScript.

Cú pháp:

@let variableName = value;

Ví dụ đơn giản

Bắt đầu với vài ví dụ cơ bản:

@let count = 1;
@let countryList = country$ | async;

Ở đây, count là một số đơn giản, và countryList nhận giá trị bất đồng bộ từ một observable.

Các quy tắc quan trọng

Biến chỉ có thể được sử dụng sau khi đã khai báo.
Biến có thể truy cập trong cùng phạm vi hoặc các phạm vi con.
Nếu khai báo trong khối như @if, biến đó chỉ khả dụng trong khối đó.

Ví dụ sử dụng

Một ví dụ thực tế hơn với danh sách quốc gia:

@let text = 'Hello';
<div class="country-list">
  @if (country$ | async; as countryList) {
    @for (country of countryList; track $index;
      let index = $index, even = $even, odd = $odd,
      last = $last, first = $first, count = $count) {

      <div class="country">
        <div class="label">
          <span>{{ index }} : {{ country.flag }}</span>
          <span>{{ country.name.common }}</span>
        </div>
        <hr />
      </div>
    }
    <span>text: {{ text }}</span>
  }
</div>

Bạn cũng có thể bind (liên kết) giá trị từ file .ts trong component:

Trong component:

date = new Date().toDateString();

Trong template:

@let time = date;

<div class="country-list">
  @if (country$ | async; as countryList) {
    @for (country of countryList; track $index;
      let index = $index, even = $even, odd = $odd,
      last = $last, first = $first, count = $count) {

      <div class="country">
        <div class="label">
          <span>{{ index }} : {{ country.flag }}</span>
          <span>{{ country.name.common }}</span>
        </div>
        <hr />
        <span>time: {{ time | json }}</span>
      </div>
    }
  }
</div>

Hành vi phạm vi (Scope): `@let` bên trong vs bên ngoài

Khai báo ngoài phạm vi

@let currentDate = date;
<div class="country-list">
  @if (country$ | async; as countryList) {
    @for (country of countryList; track $index;
      let index = $index, ... ) {
      <div class="country">
        ...
        <span>time: {{ currentDate | json }}</span>
      </div>
    }
  }
</div>

{{ currentDate }} <!-- ✅ Hợp lệ -->

Biến @let currentDate được khai báo ở cấp cao nhất, nên có thể sử dụng toàn bộ trong template.

Khai báo trong phạm vi

@if (true) {
  @let currentDate = date;
  ...
}

{{ currentDate }} <!-- ❌ Lỗi: Thuộc tính 'currentDate' không tồn tại -->

Khai báo trong khối như @if sẽ giới hạn phạm vi biến chỉ trong khối đó.

Sử dụng trước khi khai báo

<div class="country-list">
  {{ currentDate }} <!-- ❌ Lỗi -->
  @let currentDate = date;
  ...
</div>

Tương tự JavaScript, nếu dùng biến trước khi khai báo sẽ gây lỗi.

Kết luận

Sử dụng @let có thể giúp template Angular của bạn đơn giản hơn bằng cách loại bỏ các pipe dư thừa và cho phép tái sử dụng biến trong phạm vi cụ thể. Tuy nhiên, hãy cẩn thận về phạm vi khai báo để tránh lỗi ngoài mong đợi.

Bạn đã thử @let trong ứng dụng Angular của mình chưa? Hãy chia sẻ kinh nghiệm hoặc khó khăn của bạn nhé!

angular

@let là gì?