در این مقاله زیر در مورد کامپوننت ها در Angular و کاربرد آن ها توضیح خواهم داد و دمویی از نحوه ساخت کامپوننت خواهیم داشت. قبل از شروع کار با کامپوننتهای Angular، میتوانید از لینک زیر مروری بر اصول اولیه Angular داشته باشید .
اجزاء
کامپوننت ها مهمترین بلوک های ساختمانی UI برای یک پروژه Angular هستند. از آنها برای طراحی و ساخت اپلیکیشن استفاده می شود. هر برنامه Angular حداقل شامل یک جزء است و به عنوان مولفه والد شناخته می شود که همراه با ایجاد یک پروژه Angular جدید ایجاد می شود. یا، می توان گفت، یک جزء ریشه است. مؤلفه والد ساختار فایلی را خواهد داشت که به طور پیش فرض در ایجاد یک برنامه از فایل های زیر تشکیل شده است.
- app.component.css
- app.component.html
- app.component.spec.ts
- app.component.ts
- برنامه module.ts
- app-routing.module.ts
فایل app-routing.module.ts یک استثنا است. اگر کاربر مسیریابی Angular را در تنظیمات پروژه انتخاب کند، فایلها ایجاد و به پوشه فایلها اضافه میشوند.
کامپوننت پیش فرض این فایل ها را همانطور که در بالا ذکر شد خواهد داشت. بیایید نگاهی به موارد استفاده از فایل های موجود در پوشه بیندازیم.
- app.component.css => فایل CSS برای اهداف یک ظاهر طراحی شده.
- app-cmp.component.html =>فایل HTML ایجاد می شود.
- app -cmp.component.spec.ts =>این فایل برای تست واحد استفاده می شود.
- app -cmp.component.ts =>در این فایل می توانیم ماژول، ویژگی ها را تعریف کنیم.
ایجاد یک جزء جدید
ابتدا باید یک اپلیکیشن Angular جدید ایجاد کنیم. Angular CLI دستوری برای ایجاد یک جزء تعریف شده توسط کاربر دارد. کامپوننتی که به طور پیش فرض ایجاد می شود به عنوان والد شناخته می شود و کامپوننت های بعدی که توسط ما ایجاد می شوند کامپوننت های فرزند هستند. اکنون یک برنامه Angular جدید و یک کامپوننت فرزند جدید ایجاد خواهیم کرد. برای ایجاد یک برنامه Angular جدید می توانیم از دستور زیر استفاده کنیم.
ng جزء جدید
![نمای کلی کامپوننت](http://pezhvak24.ir/dl/10kcor/cscd/article/angular-for-beginners-part-two-overview-of-component/Images/back01.png)
برای ایجاد کامپوننت فرزند می توانیم از دستور زیر استفاده کنیم.
ng gc کودک
![نمای کلی کامپوننت](http://pezhvak24.ir/dl/10kcor/cscd/article/angular-for-beginners-part-two-overview-of-component/Images/02.png)