در انگولار امکانی فراهم شده تحت عنوان standalone component. من این رو «کامپوننت مستقل» ترجمه کردم.
کامپوننت‌های مستقل راه ساده‌ای برای ساخت برنامه‌های انگولار ارائه می‌دهند. کامپوننتها، دایرکتیوها و پایپ‌های مستقل، با کاهش نیاز به NgModuleها تجربه برنامه‌نویسی بهتری را رقم می‌زنند.
کامپوننت مستقل انگولار در نسخه 14 تحت developer preview منتشر شد و برای استفاده در نسخه 15 تثبیت شد. اکنون تیم انگولار در نسخه 16 برای تسهیل انتقال اپلیکیشنها به کامپوننت‌های مستقل، راهنمای مهاجرت (standalone migration guid) تهیه کردند. اپلیکیشن‌های موجود می‌توانند به‌صورت اختیاری و تدریجی و بدون دردسر به روش جدید مهاجرت کنند.
بیایید بیشتر در مورد کامپوننت‌های مستقل بدانیم.
کامپوننتها، دایرکتیوها و پایپ‌هایی که بصورت مستقل تعریف می‌شوند، دیگر نیازی به اعلان در NgModule ندارند. کامپوننت‌های مستقل به‌جای دریافت dependecyهای خود از طریق NgModuleها، آنها را مستقیماً در خود مشخص می‌کنند.
برای تعریف یک کامپوننت مستقل، شما باید standalone: true را به آن اضافه کنید و هر وابستگی که در تمپلیت آن استفاده می‌شود را در بخش imports مشخص کنید. برای مثال، اگر شما یک کامپوننت با نام ImageComponent دارید که در تمپلیت یک کامپوننت دیگر با نام UserComponent استفاده می‌شود، شما باید ImageComponent را در UserComponent وارد کنید:
@Component(
{
selector: 'ns-user',
standalone: true,
imports: [ImageComponent],
templateUrl: './user.component.html' // uses `<ns-image>`
}
)
export class UserComponent {
// logic
}
هنگام نوشتن یک کامپوننت مستقل ممکن است بخواهید از کامپوننتها، دایرکتیوها یا پایپ‌های دیگر در قالب کامپوننت استفاده کنید. برخی از این وابستگی‌ها ممکن است به صورت مستقل معرفی نشده باشند بلکه توسط NgModule موجود اعلام و تعریف شده باشند. در این حالت، می‌توانید NgModule را مستقیماً به وارد کامپوننت مستقل کنید. برای مثال، اگر شما می‌خواهید از ngIf در تمپلیت خود استفاده کنید، شما باید CommonModule را وارد کنید:
@Component(
{
selector: 'ns-user',
standalone: true,
imports: [CommonModule, ImageComponent],
templateUrl: './user.component.html' // uses `*ngIf` and `<ns-image>`
}
)
export class UserComponent {
// logic
}
همچنین کامپوننت‌های مستقل می‌توانند به کامپوننت‌های موجود مبتنی بر NgModules وارد شوند. بدین صورت اپلیکیشن‌های موجود (که امروزه از NgModules استفاده می‌کنند)، می‌توانند به تدریج خود را با سبک جدید و کامپوننت‌های مستقل وفق دهند.
یک برنامه انگولار را می‌توان بدون NgModule، با استفاده از یک یک کامپوننت مستقل که به عنوان کامپوننت اصلی برنامه مشخص شده است، بالا آورد. این کار با استفاده از bootstrapApplication API انجام می‌شود.
روتر انگولار نیز به‌روزرسانی و ساده‌سازی شده است تا بتواند از کامپوننت‌های مستقل بهره‌مند شود. با این به‌روزرسانی، در بسیاری از سناریوهای معمول و lazy-loading دیگر نیازی به NgModule نیست.
امیدوارم با خواندن این مقاله، علاقه‌مند شده باشید تا Angular standalone components را در پروژه‌های خود امتحان کنید. برای کسب اطلاعات بیشتر، می‌توانید به منبع زیر مراجعه کنید:
