ANGULAR 16 – SIGNALS – انجمن DEV

آیا در مورد ویژگی جدید Angular 16 که تشخیص تغییرات را بهبود می بخشد و کد شما را واکنش پذیرتر می کند کنجکاو هستید؟

به سیگنال های Angular نگاه نکنید!

در این مقاله، سیگنال‌های Angular را معرفی می‌کنیم و توضیح می‌دهیم که چگونه می‌توانند برای برنامه‌های کاربردی شما مفید باشند. با سیگنال‌های موجود برای پیش‌نمایش توسعه‌دهندگان در نسخه 16 Angular، که قرار است در می 2023 منتشر شود، می‌توانید این ویژگی جدید هیجان‌انگیز را هم اکنون امتحان کنید. ما حتی به شما نشان خواهیم داد که چگونه با سیگنال های Angular در پروژه های خود شروع کنید.
بیایید به دنیای سیگنال های Angular شیرجه بزنیم!

سیگنال های زاویه ای چیست؟

سیگنال ها یک مقدار واکنشی هستند و از نظر فنی یک تابع آرگومان صفر هستند [(() => T)] ، وقتی آن را اجرا می کنیم مقدار را برمی گردانند.

توجه: ارزش به اضافه اعلان تغییر.

سیگنال فقط نوع خاصی از متغیر است که دارای یک مقدار است. اما برخلاف سایر متغیرها، یک سیگنال هنگام تغییر مقدار متغیر نیز اطلاع رسانی می کند.

کجا می توانیم از سیگنال ها استفاده کنیم؟ – هر جا در کد شما

چگونه از سیگنال ها استفاده کنیم؟

با فراخوانی تابع signal() یک سیگنال ایجاد و مقداردهی اولیه می کنیم.

Example:
const count = signal(0);

// Signals are getter functions - calling them reads their value.
console.log('The count is: ' + count());

سیگنال ها را تغییر دهید

• تنظیم [set(value: T): void] برای جایگزینی (سیگنال را روی یک مقدار جدید تنظیم کنید و به افراد وابسته اطلاع دهید)

count.set(3);

• به روز رسانی[update(updateFn: (value: T) => T)] برای استخراج یک مقدار جدید (مقدار سیگنال را بر اساس مقدار فعلی آن به‌روزرسانی کنید و به افراد وابسته اطلاع دهید)، عملیات به‌روزرسانی از عملیات set() برای انجام به‌روزرسانی‌ها در پشت صحنه استفاده می‌کند.

// Increment the count by 1.
count.update(value => value + 1);

• جهش پیدا کند [mutate(mutatorFn: (value: T) => void)] برای انجام جهش داخلی مقدار فعلی (مقدار فعلی را با جهش در محل به روز کنید و به وابستگان خود اطلاع دهید)

const todos = signal([{title: 'Learn signals', done: false}]);

todos.mutate(value => {
  // Change the first TODO in the array to 'done: true' without replacing it.
  value[0].done = true;
});

عوارض جانبی در Signal – effect()

گاهی اوقات، زمانی که یک سیگنال دارای یک مقدار جدید است، ممکن است لازم باشد یک عارضه جانبی اضافه کنیم. برای انجام این کار، می‌توانیم از تابع effect() استفاده کنیم.
افکت یک تابع جانبی را در یک زمینه واکنشی برنامه ریزی و اجرا می کند.

تابع درون افکت با هر تغییری که در سیگنال های فراخوانی شده درون آن رخ دهد، دوباره ارزیابی می شود. چندین سیگنال را می توان به عملکرد افکت اضافه کرد.

محاسبه شده()
اگر مقدار دیگری وجود داشته باشد که به مقادیر سیگنال های دیگر بستگی دارد و هر زمان که هر یک از آن وابستگی ها تغییر کرد باید دوباره محاسبه شود چه؟

در این مورد، می‌توانیم از یک تابع ()computed برای ایجاد یک سیگنال جدید استفاده کنیم که هر زمان که وابستگی‌های آن تغییر کند، به‌طور خودکار به‌روزرسانی می‌شود.

const count: WritableSignal<number> = signal(0);
const doubleCount: Signal<number> = computed(() => count() * 2);

*کد آزمایشی توسط @deborahk *: https://stackblitz.com/edit/angular-signals-deborahk?file=src%2Fmain.ts

اگر کار من را دوست دارید و می خواهید از من برای کار سخت حمایت کنید، لطفا از طریق:

پرداخت وب سایت Revolut یا از کد QR بالا استفاده کنید.

با تشکر از یک دسته برای حمایت از من! خیلی معنی داره😍