Angular 19 and the @let Directive: What’s New and Best Practices — AZ

Bu məqalədə sizə Angular 19 ilə gələn və mənim ən çox istifadə etdiyim @let directive-i haqqında ətraflı məlumat verəcəyəm. @let directive-i, template-də daha optimal və oxunaqlı kod yazmağa imkan verən ən sevdiyim yeniliklərdən biridir.

@let Direktivi nədir?

Əvvəllər Angular template variable yaratmaq üçün *ngIf *və ngFor kimi structure directive-lərin içərisində “as**” operatorundan istifadə edirdik. Məsələn:

<div *ngIf="user$ | async as user">
  {{ user.name }}
</div>

İndi isə @let directive-i ilə template-də istənilən dəyişəni rahat şəkildə tanımlaya bilərik:

@let user = user$ | async;
@(user){
  <div>
    {{ user.name }}
  </div>
}

Bu yanaşma async pipeni və *ngIf(@if) directive-ini bir-birindən ayıraraq kodun oxunaqlılığını artırır.

Best practices

1. Daha Oxunaqlı Template

Əvvəl:

<div *ngIf="(user$ | async) as user">
  <p>{{ user.name }}</p>
  <p>{{ user.age }}</p>
</div>

@let ilə:

@let user = user$ | async;
@(user){
  <div>
    <p>{{ user.name }}</p>
    <p>{{ user.age }}</p>
  </div>
}

Bu yanaşma kodu daha təmiz və oxunaqlı edir.

2. Mürəkkəb Vairable-lərin Saxlanması və Yenidən İstifadəsi

Əvvəl:

// 1-ci numunə
<div *ngIf="(user$ | async)?.isActive as isActiveUser">
  <p *ngIf="isActiveUser">Aktivdir</p>
</div>

//2-ci nümunə
<div *ngIf="(order$ | async)?.status === 'completed' as isCompleted">
  <p *ngIf="isCompleted">Sifariş tamamlanmışdır</p>
</div>

@let ilə:

// 1-ci numunə
@let isActiveUser = (user$ | async)?.isActive;
@if(isActiveUser){
  <p>Aktivdir</p>
}

//2-ci nümunə
@let isCompleted = (order$ | async)?.status === 'completed';
@if(isActiveUser){
  <p>Sifariş tamamlanmışdır</p>
}

3. Nested *ngIf *və ngFor** Problemlərinin Qarşısını Almaq

Əgər *ngFor içərisində dəyəri təyin edib istifadə etmək istəyirsinizsə, @let böyük kömək edə bilər.

Əvvəl:

<ul>
  <li *ngFor="let user of users$ | async">
    <span *ngIf="user.age > 18 as isAdult">{{ user.name }} - 18 yaşdan böyükdür</span>
  </li>
</ul>

@let ilə:

@let users = users$ | async;
@if(users){
  <ul>
    @for (user of users; track user.idHash) {
      @let isAdult = user.age > 18;
      <li>
        @if(users){
          <span>{{ user.name }} - 18 yaşdan böyükdür</span>
        }
      </li>
    }
  </ul>
}

Bu metod async pipenin hər yerdə işlədilməsinin qarşısını alaraq performansı artırır.

@let directive-ni istifadəsi kontekstdən asılıdır. @let ilə təyin etdiyiniz dəyişən yalnız o kontekstdə istifadə edilə bilər. Yeni ki, harada onu təyin etmisiniz. Əgər bu dəyişəni bir neçə dəfə istifadə etmək istəyirsinizsə, onu üst səviyyədə, məsələn, <ng-container> daxilində, təyin edə bilərsiniz.

Aşağıda nümunədə göstərirəm ki, “@let accessRigt” dəyişəni bir kontekstdə təyin edərək, daha sonra onu müxtəlif yerlərdə istifadə edə biləsiniz. Və həmçinin “@let columnHidden“ dəyişəni yalnız @for içində istifadə edilə bilər

<table matSort mat-table>
  // hər yerdə əlçatandır
  @let accessRigth = [options.path + '_Put', options.path +'_Delete'];
  <thead>
    <tr>
      @for (col of options.columns; track col.fieldName; let i = $index) {
        // yalnız bu for-un içində istifadə edilə bilər
        @let columnHidden = {'hidden-column': isColumnHidden(col.name)};
        @if (col.hasSort) {
          <th [mat-sort-header]="col.name" [ngClass]="columnHidden">{{ col.label }}</th>
        } @else {
          <th [ngClass]="columnHidden">{{ col.label }}</th>
        }
      }
      <th handleAccess [accessRight]="accessRigth">Əməliyyatlar</th>
    </tr>
  </thead>
  <tbody>
    @for (item of data; track item.idHash; let i = $index) {
      <tr>
        @for (col of options.columns; track col.name) {
          // yalnız bu for-un içində istifadə edilə bilər
          @let columnHidden = {'hidden-column': isColumnHidden(col.name)};
          <td [ngClass]="columnHidden">
            <div>
              {{ item[col.name] }}
            </div>
          </td>
        }
        <td handleAccess [accessRight]="accessRigth"></td>
      </tr>
    } 
  </tbody>
</table>

@let Direktivinin Üstünlükləri

1. Kodun Oxunaqlılığını Artırır — Template-lərdə daha təmiz və oxunaqlı olur.
2. Təkrarçılığın Qarşısını Alır — Eyni ifadəni bir neçə dəfə yazmaq əvəzinə bir yerdə saxlayıb istifadə etməyə imkan verir.
3. Performansı Artırır — async pipeni və şərtləri bir yerdə idarə etməyə imkan verir.

Məhdudiyyətləri

1. Angular 19-a qədər mövcud deyil — Köhnə versiyalarda @let işləməyəcək.
2. Yeni Sintaksisə Öyrəşmək Lazımdır — Angular istifadəçiləri üçün yeni yanaşmadır və əvvəlki *ngIf as sintaksisi ilə fərqlidir.

Nəticə

Angular 19-un @let directive-i template kodunu daha oxunaqlı və optimallaşmış yazmağa kömək edir. Xüsusilə, asinxron məlumatları idarə edərkən, şərtləri təyin edərkən və nested strukturlar ilə işləyərkən çox faydalıdır.

Əgər Angular 19-a hələ keçməmisinizsə, @let, @for, @if, @switch kimi direktivlərin təqdim etdiyi yeni imkanlardan faydalanmaq üçün versiyanızı yeniləməyi düşünməlisiniz! PS: Bu mövzunu @let direktivinə həsr etdim, lakin digər yeni direktivlər haqqında da məqalələrim olacaq. İzləmədə qalın! 🔥🔥🔥