مقدمة

مع وصول Angular 18.1، يقدم هذا الإصدار ميزة جديدة ومثيرة للمترجم: القدرة على الإعلان عن واحد أو أكثر من متغيرات القالب.
كيف يتم استخدام هذه الميزة، وما هي حالات الاستخدام المختلفة؟

هذا المقال يهدف إلى الإجابة.

أحدث ميزة للمترجم: @let

مع أحدث إصدارات Angular، قدم الفريق وظائف جديدة في المترجم، وتترجم هذه الوظيفة إلى @-syntax.

هذه هي الطريقة التي ظهرت بها صيغة تدفق التحكم الجديدة

• @لو
• @ل
• @يُحوّل

ومؤخرًا، @let

كقاعدة عامة، أسهل طريقة لإنشاء متغير القالب هي استخدام

• التوجيه الهيكلي *ngIf مع الكلمة الأساسية as الكلمة الرئيسية

أو استخدام بناء جملة تدفق التحكم الجديد

• @if مع الكلمة الأساسية as

  {{ user.name }}



@if(user$ |async; as user){
  
{{ user.name }}
}

أتاحت لنا هذه الميزة المفيدة تخزين نتيجة الأنبوب غير المتزامن في متغير لاستخدامه لاحقًا في القالب.

ومع ذلك، فإن بناء الجملة هذا يثير بعض الأسئلة. هنا، يتحقق الشرط مما إذا كان إرجاع الأنبوب غير المتزامن صحيحًا، وبالتالي ما إذا كانت القيمة المرجعة مختلفة عن أي قيمة تعتبر خاطئة في جافا سكريبت.

ستعمل هذه الحالة جيدًا إذا كان الإرجاع عبارة عن كائن أو مصفوفة.

ولكن إذا كان الإرجاع رقمًا وبالأخص الرقم 0

@if(((numbers$ |async) !=== undefined || (numbers$ |async) !=== null) ; as myNumber){
  
{{ myNumber }}
}

هذا هو المكان الذي يأتي فيه @let.

@let لا يتحقق من الشرط، بل يسمح لك فقط بإعلان متغير قالب محلي بطريقة بسيطة

لذلك يصبح مثال الكود أعلاه أبسط بكثير وأكثر أناقة في الكتابة

@let myNumber = (numbers$ | async) ?? 0;
{{ myNumber }}

بهذه الطريقة سيتم دائمًا عرض المتغير myNumber.

الطرق المختلفة لاستخدام @let

أحد السيناريوهات الأكثر كلاسيكية مع تعريف المتغير هو تخزين نتيجة تعبير معقد.

لقد كان من غير المستحسن دائمًا استخدام وظيفة في حالة ما. كان لاستخدام وظيفة في حالة ما تأثير على الأداء، بمعنى أنه عند أدنى حركة للماوس، أو تغيير في القالب، تتم إعادة تقييم الوظيفة.

@let، كما هو موضح أعلاه، لا يقوم بالتقييم، ولكنه ببساطة يعلن عن متغير محلي. سيتم إعادة تقييم هذا المتغير فقط في حالة تغير أحد تبعياته. لذا فإن استدعاء دالة ليس فكرة سيئة للتعبيرات مثل التعبير المعقد.

@for(user of users(); track user.id) { @let isAdmin = checkIfAdmin(user);
• User is admin: {{ isAdmin }}
}

استخدم @let مع الإشارات

@let متوافق مع الإشارات، ويستخدم كالآتي

@let userColor = user().preferences?.colors?.primaryColor || 'white';
user favorite color is {{ userColor }}

@let وتعبير جافا سكريبت

كما ترون، يمكن استخدام @let لتقييم أي نوع من تعبيرات جافا سكريبت، بصرف النظر عن إنشاء مثيل لفئة على سبيل المثال

بهذه الطريقة، يتم تفسير العوامل الحسابية ويمكن الإعلان عن عدة متغيرات على عدة أسطر مختلفة أو على سطر واحد فقط.

  
    @for (score of scores(); track $index) {
        @let total = total   score, max = calcMax(score);
        
final score: {{ total }}
    }

أشياء رائعة أخرى يجلبها @let

كما هو موضح أعلاه، فإن سلوك @let يشبه إلى حد كبير سلوك Let in javascript، والذي يتمتع بالمزايا التالية

• يعمل النطاق مثل النطاق المسموح به في جافا سكريبت
• تداخل أفضل في الكتابة في القالب
• يظهر خطأ إذا تم استخدام متغير (let) قبل الإعلان عنه