🔶 تغییرات Input در Angular 16

نوشتن کامپوننت‌های کوچک در اغلب موارد روشی خوب برای مدیریت کدهای Angular محسوب می‌شود. با نوشتن کامپوننت‌های کوچک باید به فکر اشتراک گذاری داده‌ها بین کامپوننت‌ها باشیم. یکی از روش‌های رایج اشتراک گذاری داده‌ها بین کامپوننت‌ها استفاده از Inputها است که در Angular 16 هم تغییراتی داشته است.

گاهی نیاز داریم که یک سری اطلاعات و داده‌ی پردازش شده را از کامپوننت والد به فرزند ارسال کنیم.

@component({
  selector : "app_child",
  templateUrl : "./child.component.html",
  styleUrls: [child.component.less"],
})

export class ChildComponent {
  @Input() id: string;
}

در این حالت کامپوننت فرزند به عنوان تگ در فایل html کامپوننت والد تعریف می‌شود:

<app_child [id] = "currentId"> </app_child>

که currentId در فایل ts کامپوننت پدر مقداردهی شده است.


دو ویژگی جدید در Angular 16 :

‼️Self-closing tags

یکی از این ویژگی‌ها عدم نیاز به بستن تگ کامپوننت فرزند است که این بهبود کوچک منجر به صرفه‌جویی در تایپ می‌شود.

<app_child [id] = "currentId"/>

‼️Required inputs

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

export class ChildComponent {
           👇
  @Input({ required: true }) id: string;
}


برای مطالعه سایر ویژگی‌هایی که در Angular 16  اضافه شده است می‌توانید به اینجا سر بزنید.

⁉️ برای بحث و تبادل نظر فنی در مورد این پست، نظرات خود را با ما در قسمت کامنت‌ها به اشتراک بگذارید.

#زهرا_خانی (لینکدین)

کانال تلگرامی:
@SoftwarePhilosophy

__________