کامپوننت ها (Components) در انگولار ۶ – آموزش Angular 6

  • چهارشنبه ۲۶ دی ۱۳۹۷
  • بازدید ۳۷۸ نفر

angular 6 components 5584 تصویر

کامپوننت ها (Components) در انگولار ۶

بخش اصلی توسعه یک برنامه در انگولار ۶ با استفاده از کامپوننت ها (Components) انجام می شود. اساس کامپوننت ها کلاس هایی هستند که با فایل های html که در مرورگر نمایش داده می شوند، ارتباط برقرار می کنند. در زیر فایل های موجود در کامپوننت app را مشاهده می کنید:

  • component.css
  • component.html
  • component.spec.ts
  • component.ts
  • module.ts

همانطور که در بخش قبلی نیز گفته شد، فایل های فوق توسط CLI و در هنگام ایجاد پروژه ساخته می شوند. اگر فایل app.module.ts را با ویرایشگر باز کنید، ماژول های استفاده شده در این کامپوننت را مشاهده خواهید کرد.

بخش declarations شامل AppComponent است که قبلا import شده است و به عنوان کامپوننت والد (parent) شناخته می شود. شما می توانید با استفاده از CLI کامپوننت جدید ایجاد کنید. توجه داشته باشید که هر کامپوننتی که ایجاد می شود، به عنوان فرزند کامپوننت app محسوب می شود.

دستور زیر به منظور ایجاد یک کامپوننت جدید استفاده می شود (new-cmp نام کامپوننت را مشخص می کند):

زمانی که دستور فوق را اجرا کنید، خروجی زیر را دریافت خواهید کرد:

حال اگر به مسیر src/app بروید، یک دایرکتوری جدید با نام new-cmp را مشاهده خواهید کرد که شامل فایل های زیر است:

  • new-cmp.component.css
  • new-cmp.component.html
  • new-cmp.component.spec.ts
  • new-cmp.component.ts

بعد از ایجاد شدن کامپوننت new-cmp، محتوای فایل app.module.ts به صورت زیر تغییر می یابد:

اگر فایل new-cmp.component.ts را باز کنید، محتویات زیر را مشاهده خواهید کرد:

اگر به کد فوق دقت کنید، یک کلاس با نام NewCmpComponent ایجاد شده است که OnInit را پیاده سازی می کند. همچنین شامل یک سازنده و متدی به نام ngOnInit است. متد ngOnInit زمانی که کلاس اجرا شود، به طور خودکار فراخوانی می شود.

نحوه کار برنامه

همانطور که در بالا نیز گفته شد، کامپوننت app که به صورت پیشفرض ایجاد شده است، به عنوان والد است و سایر کامپوننت های ایجاد شده به عنوان فرزند این کامپوننت هستند. اگر در مرورگر خود آدرس http://localhost:4200 را باز کنید، ابتدا فایل index.html که شامل کدهای زیر است اجرا می شود.

به جزء تگ زیر همه کدهای فوق به طور معمول در اکثر اسناد html موجود هستند:

این تگ توسط انگولار ایجاد شده است و به عنوان تگ ریشه (root) عمل می کند. مرجع این تگ در فایل main.ts مشخص شده است.

AppModule از کامپوننت app وارد (import) شده و به ماژول bootstrap که برنامه را لود می کند، ارسال می شود.

حال به محتوای فایل  app.module.ts توجه کنید:

در کد فوق یک متغیر به نام AppComponent که app.Component.ts را در خود نگه می دارد تعریف شده است. همان متغیر به bootstrap نیز داده می شود.

محتوای فایل app.component.ts:

angular core به کامپوننت اضافه شده و در متغیری به نام Component که در Declarator استفاده می شود، قرار گرفته است.

در بخش declaratory به selector، templeateUrl و styleUrl ارجاع داده می شود. selector تگی که در فایل index.html بود (همان app-root) را اعلان می کند، templeateUrl قالب کامپوننت و stylesUrl استایل های مربوط به این کامپوننت را مشخص می کند. همچنین کلاس AppComponent شامل یک متغیر به نام title است که در مرورگر نمایش داده می شود.

محتوای فایل app.component.html که قالب کامپوننت را تعریف می کند، به صورت زیر است:

آن فقط شامل چند خط کد html به همراه یک متغیر title که در داخل {{}} قرار دارد، است. زمانی که برنامع اجرا شود، مقدار متغیر title که در داخل کلاس AppComponent تعریف شده بود، با {{title}} جایگزین خواهد شد. به این کار بایند کردن (Binding) گفته می شود که در بخش های بعدی بررسی می کنیم. در ادامه محتوای فایل های کامپوننت new-cmp را بررسی می کنیم.

محتوای فایل new-cmp.component.ts:

در کد فوق دو import از angular core وجود دارد که اولی در declaratory استفاده می شود و دومی در کلاس NewCmpComponent پیاده سازی می شود. در declaratory یک selector با نام app-new-cmp، یک قالب، و یک فایل استایل مشخص شده است.

به طور پیشفرض فایل new-cmp.component.html شامل محتوای زیر است:

فایل new-cmp.component.css هیچ محتوایی ندارد.

زمانی که برنامه اجرا کنید، هیچ چیزی از کامپوننت new-cmp نمایش داده نخواهد شد. زیرا باید آن را به کامپوننت والد (app) اضافه کنید. مانند نمونه زیر:

حال زمانی که برنامه اجرا شود، محتوای فایل new-cmp.component.html به جای تگ <app-new-cmp></app-new-cmp> قرار می گیرد و در مرورگر نمایش داده می شود.

فایل new-cmp.component.ts باز کرده و مانند نمونه زیر یک متغییر با نام newcomponent و مقدار “Entered in new component created” به آن اضافه کنید:

حال در فایل new-cmp.component.html می توانید به آن متغیر دسترسی داشته باشید مانند نمونه زیر از آن استفاده کنید:

 حال اگر برنامه را اجرا کنید خروجی زیر را مشاهده خواهید کرد:

angular 6 components 5584 1 تصویر

ثبت نظر
ریفریش کنید!
نظرات کاربران (۰ مورد)

هیچ نظری ثبت نشده است