نحوه ایجاد و استفاده از کامپوننت های خود در Angular

عناصر قابل استفاده مجدد خود را برای سازماندهی سایت و افزایش کارایی خود اضافه کنید.

کامپوننت یکی از مهم ترین بلوک های سازنده یک برنامه Angular است. کامپوننت ها بیت های کد قابل استفاده مجدد هستند که بخش های خاصی از وب سایت شما را تشکیل می دهند.

نمونه هایی از اجزایی که می توانید ایجاد کنید شامل عناصر رابط کاربری کوچکتر مانند دکمه ها یا کارت ها می شود. آنها همچنین می توانند شامل عناصر UI بزرگتر مانند نوارهای کناری، نوارهای پیمایش یا کل صفحات باشند.

استفاده از Component ها در Angular

هنگامی که کامپوننت هایی را در یک برنامه Angular ایجاد می کنید، می توانید آنها را در اجزای دیگر استفاده کنید. به عنوان مثال، می توانید یک مؤلفه برای یک عنصر کارت UI بزرگ ایجاد کنید. سپس می توانید از این مؤلفه به عنوان یک تگ معمولی HTML در هر جایی که دوست دارید استفاده کنید:

<app-new-component></app-new-component>

از آنجایی که کامپوننت ها بیت های کد قابل استفاده مجدد هستند، می توانید متغیرهایی را نیز ارسال کنید تا داده های هر نمونه متفاوت باشد. شما همچنین می توانید اجزایی برای صفحات ایجاد کنید و می توانید با استفاده از فایل app-routing.module.ts به آنها مسیریابی کنید.

شما می توانید اجزای خود را بر اساس ساختار برنامه خود و اینکه چقدر می خواهید عملکرد خود را از هم جدا کنید، طراحی کنید.

چگونه یک کامپوننت ایجاد کنیم

می توانید از دستور nggenerate برای ایجاد یک کامپوننت جدید استفاده کنید.

1. یک برنامه Angular جدید با استفاده از ng new ایجاد کنید یا یک برنامه موجود را باز کنید.
2. خط فرمان یا ترمینال را باز کنید. از طرف دیگر، اگر برنامه Angular خود را در یک IDE مانند Visual Studio Code باز دارید، می توانید از ترمینال داخلی استفاده کنید.
3. در ترمینال، به محل پوشه ریشه پروژه بروید. برای مثال:cd C:\Users\Sharl\Desktop\Angular-Application
4. دستور ng generate component را اجرا کنید و به دنبال آن نام کامپوننت جدید: ng generate component UI-card را اجرا کنید
5. کامپوننت جدید در یک پوشه جدید در دایرکتوری src/app ایجاد می شود.

cd C:\Users\Sharl\Desktop\Angular-Application

ng generate component ui-card

نحوه اضافه کردن محتوا به کامپوننت Angular

Angular هر جزء را با یک فایل HTML، CSS، TypeScript و Testing Specification ایجاد می کند.

• فایل HTML محتوای HTML جزء را ذخیره می کند.
• فایل CSS استایل کامپوننت را ذخیره می کند.
• فایل Testing Specification (spec.ts) هر آزمایش واحد را برای مؤلفه ذخیره می کند.
• فایل TypeScript منطق و عملکردی را که مؤلفه را تعریف می کند ذخیره می کند.

مقداری محتوا را به مؤلفه کارت رابط کاربری سفارشی اضافه کنید.

1. src/app/ui-card/ui-card.component.html را باز کنید و HTML مؤلفه را به‌روزرسانی کنید. مطمئن شوید که یک تصویر با همان نام در پوشه ای به نام src/assets/images در برنامه Angular خود دارید. محتوای ui-card.component.html را با موارد زیر جایگزین کنید:                 کوه‌های آبی

           

   NSW، استرالیا