برنامه نویسی

ویژگی های جدید Angular 16: ورودی ها در کامپوننت ها

Summarize this content to 400 words in Persian Lang
1) ورودی کامپوننت مورد نیاز از Angular 16.اکنون یک جزء می تواند ورودی مورد نیاز را داشته باشد.

تصور کنید یک کامپوننت با یک ورودی به نام کاربر داریم و می خواهیم اجباری باشد، یعنی همیشه باید وجود داشته باشد. برای انجام این کار، براکت های فرفری را باز و بسته می کنیم و مقدار مورد نیاز را روی true تنظیم می کنیم:

با انجام این کار، اگر بخواهیم از این کامپوننت بدون عبور از ورودی اجباری آن استفاده کنیم، خطا ظاهر می شود. اگر ورودی را پاس کنیم، به درستی اجرا می شود:

این امر توسعه را به‌ویژه در پروژه‌های قدیمی‌تر ساده می‌کند، زیرا تشخیص اینکه کدام ورودی‌ها اجباری هستند و کدام‌ها نه، آسان خواهد بود. در نسخه‌های قبلی، فقط می‌توانید اعتبارسنجی‌ها را برای بررسی وجود ورودی‌ها اضافه کنید.

2) تبدیل های ورودی در کامپوننت ها در Angular 16.یک ورودی برای انتقال اطلاعات از یک جزء والد به یک جزء فرزند استفاده می شود. اما گاهی اوقات می خواهیم اطلاعات را به روش یا قالب دیگری منتقل کنیم. از این نسخه به بعد، ما می توانیم ورودی های خود را به راحتی تغییر دهیم.

تصور کنید یک جزء با ورودی به نام سهام داریم. ما می خواهیم که وقتی سهام null است، به جای اینکه به صورت null ظاهر شود، 0 را نشان دهد. به عبارت دیگر، می خواهیم یک تغییر کوچک ایجاد کنیم.

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در گذشته، ما فقط می‌توانستیم این کار را با یک تنظیم‌کننده انجام دهیم، اما این کار دشوار بود زیرا مجبور بودیم یک تنظیم‌کننده و سپس یک متغیر جداگانه برای نمایش داده‌ها ایجاد کنیم:

اکنون، در یک ورودی، می‌توانیم ویژگی transform را تنظیم کنیم و از یک تابع برای مدیریت تبدیل استفاده کنیم:

اکنون، تبدیل در داخل براکت های شی در ورودی اتفاق می افتد. تبدیل را تنظیم می کنیم و تابعی را به آن می دهیم. به عنوان مثال، ما تابع تبدیل را در بالا اعلام می کنیم، اما در عمل، می توانیم یک فایل یا چیزی مشابه ایجاد کنیم. در HTML کامپوننت، ما مستقیماً متغیر سهام را فراخوانی می کنیم: {{stock}}

3) پارامترهای URL را با استفاده از ورودی ها، بدون ActivatedRoute، در Angular 16 استخراج کنید.پیش از این، تنها راهی که برای به دست آوردن پارامتر مسیر داشتیم، ActivatedRoute بود. در مثال، پارامتر id نامیده می شود و سرویس تزریق و استفاده می شود:

با این حال، اکنون می‌توانیم این کار را با ورودی‌ها نیز انجام دهیم، به سادگی با ایجاد یک ورودی که همنام پارامتر route باشد و ویژگی آن بازیابی شود. برای انجام این کار، باید آن را در provideRouter در appConfig پیکربندی کنیم: withComponentInputBinding():

این رویکرد جدید از نیاز به تزریق سرویس جلوگیری می کند.

– یادداشت هایی بر اساس دوره Angular از EfisioDev –

1) ورودی کامپوننت مورد نیاز از Angular 16.
اکنون یک جزء می تواند ورودی مورد نیاز را داشته باشد.

تصور کنید یک کامپوننت با یک ورودی به نام کاربر داریم و می خواهیم اجباری باشد، یعنی همیشه باید وجود داشته باشد. برای انجام این کار، براکت های فرفری را باز و بسته می کنیم و مقدار مورد نیاز را روی true تنظیم می کنیم:

توضیحات تصویر

با انجام این کار، اگر بخواهیم از این کامپوننت بدون عبور از ورودی اجباری آن استفاده کنیم، خطا ظاهر می شود. اگر ورودی را پاس کنیم، به درستی اجرا می شود:

توضیحات تصویر

این امر توسعه را به‌ویژه در پروژه‌های قدیمی‌تر ساده می‌کند، زیرا تشخیص اینکه کدام ورودی‌ها اجباری هستند و کدام‌ها نه، آسان خواهد بود. در نسخه‌های قبلی، فقط می‌توانید اعتبارسنجی‌ها را برای بررسی وجود ورودی‌ها اضافه کنید.

2) تبدیل های ورودی در کامپوننت ها در Angular 16.
یک ورودی برای انتقال اطلاعات از یک جزء والد به یک جزء فرزند استفاده می شود. اما گاهی اوقات می خواهیم اطلاعات را به روش یا قالب دیگری منتقل کنیم. از این نسخه به بعد، ما می توانیم ورودی های خود را به راحتی تغییر دهیم.

تصور کنید یک جزء با ورودی به نام سهام داریم. ما می خواهیم که وقتی سهام null است، به جای اینکه به صورت null ظاهر شود، 0 را نشان دهد. به عبارت دیگر، می خواهیم یک تغییر کوچک ایجاد کنیم.


وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در گذشته، ما فقط می‌توانستیم این کار را با یک تنظیم‌کننده انجام دهیم، اما این کار دشوار بود زیرا مجبور بودیم یک تنظیم‌کننده و سپس یک متغیر جداگانه برای نمایش داده‌ها ایجاد کنیم:

توضیحات تصویر

توضیحات تصویر

اکنون، در یک ورودی، می‌توانیم ویژگی transform را تنظیم کنیم و از یک تابع برای مدیریت تبدیل استفاده کنیم:

توضیحات تصویر

اکنون، تبدیل در داخل براکت های شی در ورودی اتفاق می افتد. تبدیل را تنظیم می کنیم و تابعی را به آن می دهیم. به عنوان مثال، ما تابع تبدیل را در بالا اعلام می کنیم، اما در عمل، می توانیم یک فایل یا چیزی مشابه ایجاد کنیم. در HTML کامپوننت، ما مستقیماً متغیر سهام را فراخوانی می کنیم: {{stock}}

3) پارامترهای URL را با استفاده از ورودی ها، بدون ActivatedRoute، در Angular 16 استخراج کنید.
پیش از این، تنها راهی که برای به دست آوردن پارامتر مسیر داشتیم، ActivatedRoute بود. در مثال، پارامتر id نامیده می شود و سرویس تزریق و استفاده می شود:

توضیحات تصویر

توضیحات تصویر

توضیحات تصویر

با این حال، اکنون می‌توانیم این کار را با ورودی‌ها نیز انجام دهیم، به سادگی با ایجاد یک ورودی که همنام پارامتر route باشد و ویژگی آن بازیابی شود. برای انجام این کار، باید آن را در provideRouter در appConfig پیکربندی کنیم: withComponentInputBinding():

توضیحات تصویر

توضیحات تصویر

این رویکرد جدید از نیاز به تزریق سرویس جلوگیری می کند.

– یادداشت هایی بر اساس دوره Angular از EfisioDev –

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا