سرویس ها (Services) در انگولار ۶ – آموزش Angular 6

  • پنج شنبه ۴ بهمن ۱۳۹۷
  • بازدید ۲۸۲ نفر

angular 6 services 5652 تصویر

سرویس ها (services) در انگولار ۶

در این بخش از آموزش فریم ورک انگولار ۶ به مبحث سرویس ها را بررسی خواهیم کرد. گاهی اوقات ممکن است بخواهید بخشی از کدهای پروژه در همه جای آن در دسترس باشند. سرویس ها برای رسیدن به این هدف به ما کمک می کنند. با استفاده از سرویس ها می توایند به متدها و پراپرتی های موجود در کامپوننت های مختلف در همه جای پروژه دسترسی داشته باشید.

به منظور ایجاد یک سرویس باید از خط فرمان و دستور زیر استفاده کنید:

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

angular 6 services 5652 1 تصویر

دو فایلی که در انتهای تصویر مشاهده می کنید (myservice.service.specs.ts و myservice.service.ts) مربوط به سرویس جدیدی است که در بالا ایجاد شد.

محتوای فایل myservice.service.ts:

در کد فوق ماژول Injectable از angular/core وارد شده و شامل یک متد با نام @Injectable و یک کلاس با نام MyserviceService است. تابع مربوط به سرویس در این کلاس ایجاد خواهد شد.

قبل از استفاده از سرویس ایجاد شده باید آن را به فایل app.module.ts اضافه کنیم. مانند نمونه زیر:

در کد فوق سرویس ایجاد شده را با استفاده از نام کلاس آن import کرده و در MyserviceService قرار داده ایم. سپس آن را به بخش providers اضافه کرده ایم.

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

در کد فوق یک تابع با نام showTodayDate که یک نمونه از کلاس Date باز می گرداند را ایجاد کرده ایم.

حال برای دسترسی به این تابع در سایر کامپوننت ها می توانید به صورت زیر عمل کنید.

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

برای دسترسی به اجزای سرویس مورد نظر باید آن را import کنید. تابع ngOnInit به صورت پیشفرض در زمان ایجاد شدن کامپوننت فراخوانی می شود و تاریخ را با استفاده از تابع showTodayDate می گیرد و در متغیر todayDate قرار می دهد.

حال به راحتی می توانیم آن را در فایل html نمایش دهیم:

استفاده از سرویس در کامپوننت new-cmp که در بخش های قبلی ایجاد کردیم:

همانطور که در بالا گفته شد، برای دسترسی به متدها و پراپرتی های سرویس باید ابتدا آن را import کنیم.

کد مربوط به فایل html:

خروجی برنامه:

angular 6 services 5652 2 تصویر

اگر شما پراپرتی موجود در سرویس را در هر کدام از کامپوننت ها تغییر دهید، نتیجه کل کامپوننت ها اعمال می شود. برای مثال یک متغیر در فایل myservice.service.ts ایجاد می کنیم. مانند نمونه زیر:

حال از این متغیر به شکل زیر در کامپوننت اصلی برنامه استفاده می کنیم:

همانطور که مشاهده می کنید، مقدار متغیر ایجاد شده را با استفاده از console.log در کنسول می نویسیم. سپس مقدار آن متغیر را تغییر می دهیم.

 حال اگر این از متغیر در کامپوننت new-cmp استفاده کنیم، مقدار آن برابر با “component created” خواهد بود.

در این کامپوننت مقدار متغیر مربوط به سرویس تغییر نمی کند و فقط مقدار آن در newcomponentproperty قرار داده شده است.

تصویر زیر خروجی برنامه و مواردی که در کنسول چاپ شده اند را نشان می دهد:

angular 6 services 5652 3 تصویر

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

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