ارائه در Angular – نحوه اشتراک گذاری داده ها

معرفی

در چارچوب زاویه ای، تزریق وابستگی و ارائه دهندگان یکی از ویژگی های اصلی هستند. این ویژگی به ما این امکان را می دهد که از یک منبع داده در بسیاری از مکان ها استفاده کنیم. برای مثال، می‌توانیم یک نتیجه تماس HTTP را با بسیاری از مؤلفه‌ها به اشتراک بگذاریم تا از درخواست‌های بیش از حد برای داده‌های مشابه جلوگیری کنیم. مثال دیگر می تواند لغو یک مقدار یا یک کلاس با مقدار دیگر باشد. در این مقاله، ارائه دهنده ها، نحوه تعریف آنها و نحوه استفاده از آنها را در بسیاری از مکان ها توضیح خواهم داد.

ارائه دهندگان چیست؟

ارائه دهندگان در Angular منبع ارزشی هستند که می تواند بین بسیاری از گیرندگان به اشتراک گذاشته شود. این می تواند یک مقدار ثابت مانند، برای مثال، string یا boolean، یا می تواند یک کلاس کامل باشد که از همان نمونه ارائه دهنده استفاده می کند. در نقش Angular ارائه دهنده، کلاس ها تحت پوشش خدمات قرار می گیرند. خدمات نوع خاصی از کلاس با یک Injectable دکوراتور با تشکر از آن، ما می توانیم از سایر ارائه دهندگان داخل کلاس خود استفاده کنیم زیرا می توان آنها را تزریق کرد. به طور پیش فرض، Injectable دکوراتور به عنوان یک استدلال برای providedIn ارزش root، به این معنی که این سرویس فعلی در سطح اصلی برنامه راه اندازی می شود. جزئیات بیشتر در مورد آن را می توانید در ادامه این مقاله بیابید.

نوع ارائه دهندگان

چارچوب زاویه‌ای دارای چند نوع ارائه‌دهنده است که متفاوت کار می‌کنند اما در نهایت داده‌ها را ارائه می‌دهند.

نشانه تزریق

یکی از انژکتورهای ممکن است InjectionToken.
این ساده ترین ارائه دهنده ای است که هدف اصلی آن نمایش مقادیری است که در هیچ کلاسی وجود ندارد.
تعریف نمونه ای از توکن تزریق به شرح زیر است:

export const timezoneToken = new InjectionToken<string>('My timezone');

عمومی است و تعریف نوع و را می پذیرد My timezone به عنوان یک توصیف زمانی مفید است که اجرای یک توکن تزریق معین را فراموش کنیم و خطا حاوی توضیحاتی باشد.

ارائه دهنده ارزش

ارائه‌دهنده ارزش، ارائه‌دهنده‌ای است که آن را می‌پذیرد useValue مقدار ویژگی که برای ارائه دهنده تنظیم شده در تنظیم می شود provide ویژگی. می تواند هر یک از مقادیر باشد. یک تعریف مثال می تواند این باشد:

    {
      provide: timezoneToken,
      useValue: 'europe/warsaw'
    },

من از توکن مثال قبلی به عنوان ارائه دهنده و مجموعه استفاده کردم europe/warsaw به عنوان یک ارزش

ارائه دهنده کارخانه

گاهی اوقات می خواهیم کاری را با یک ارائه دهنده موجود انجام دهیم و آن را به عنوان یک نمونه ارائه دهنده جدید دیگر ارائه کنیم. ما می توانیم از یک ارائه دهنده کارخانه استفاده کنیم که سه ویژگی را برای این منظور می پذیرد. را provide ویژگی مشخص می کند که کدام ارائه دهنده را ارائه خواهیم کرد. بیایید یک مثال بزنیم. اول از همه، یک نشانه تزریق دیگر را تعریف می کنم:

export const timezoneCityToken = new InjectionToken<string>('My timezone city');

سپس برای تعریف ارائه دهنده کارخانه:

    {
      provide: timezoneCityToken,
      useFactory: (timezone: string) => {
          return timezone.split('/')[1];
      },
      deps: [timezoneToken]
    },

در deps دارایی، ما وابستگی هایی را برای ارائه دهنده خود تنظیم می کنیم. در این مثال من استفاده کردم timezoneToken از مثال قبلی این وابستگی‌ها به‌عنوان پارامتر به متد ارسال می‌شوند که در قسمت تنظیم شده است useFactory ویژگی. آن ویژگی متدی را می‌پذیرد که مقدار را برای ارائه‌دهنده جدید ما برمی‌گرداند.
گاهی اوقات می خواهیم یک آرایه از مقادیر را تحت همان ارائه دهنده تنظیم کنیم. برای دستیابی به آن، می توانیم ویژگی را تعیین کنیم multi به true، بنابراین ارزش ارائه دهنده فوق خواهد بود ['warsaw'] به جای فقط warsaw.

از ارائه دهنده کلاس استفاده کنید

نوع دیگری از ارائه دهندگان است useClass ارائه دهنده. زمانی استفاده می شود که بخواهیم از یک کلاس استاندارد برای ایجاد یک نمونه برای ارائه دهنده خود استفاده کنیم. نمونه ای از استفاده می تواند این باشد:

    {
      provide: MyDataAbstarct,
      useClass: UsersList,
    }

و MyDataAbstarct محتوا یک کلاس انتزاعی است، بنابراین نمی تواند نمونه خود را داشته باشد:

export abstract class MyDataAbstarct {
    abstract itemsList: string[];
}

و UsersList محتوا:

export class UsersList extends MyDataAbstarct {
    itemsList = ['John', 'Mike', 'Anna'];
}

برای رسیدن به این لیست می توانیم از inject روش توسط:

  readonly list = inject(MyDataAbstarct).itemsList;

بنابراین useClass ارائه دهنده روشی جالب برای داشتن یکپارچگی در مکان های مختلف و استفاده از الگوهای رایج است زیرا می توانیم به راحتی کلاس استفاده شده را جایگزین کنیم اما ارائه دهنده را حفظ کنیم.

از ارائه دهنده موجود استفاده کنید

آخرین نوع ارائه دهنده است useExisting ارائه دهنده. مشابه a کار می کند useClass، اما همان نمونه را با ارائه دهنده انتخاب شده به اشتراک می گذارد. استفاده ساده می تواند:

...,
    UsersList,
    {
      provide: MyDataAbstarct,
      useExisting: UsersList,
    },
...

لطفاً این را به خاطر بسپارید useClass یک نمونه جداگانه از ارائه دهنده انتخاب شده ایجاد می کند.

استفاده ارائه دهندگان

اینها نمونه هایی از انواع ارائه دهندگان در Angular هستند. حالا بیایید ببینیم چگونه می توانیم آنها را ارائه دهیم.

سطح ریشه

سرویس‌ها در Angular کلاس‌هایی هستند که می‌توانند با سایر ارائه‌دهندگان تزریق شوند و عمدتاً برای ارائه منطق مشترک استفاده می‌شوند. ما می‌توانیم آن‌ها را (برای ایجاد نمونه‌های جدید) در سطح ریشه برنامه‌مان تزریق کنیم، که یک رویکرد پیش‌فرض برای خدمات است. توسط یک دکوراتور اختصاصی تنظیم شده است:

@Injectable({
  providedIn: 'root'
})

ارزش root به این معنی است که یک سرویس داده شده در سطح بالای برنامه تزریق می شود. یک مقدار دیگر می تواند باشد platform، به این معنی که ما نمونه هایی را با برنامه های دیگر در همان صفحه به اشتراک می گذاریم. آخرین مقدار ممکن است any، به این معنی که هر مکان یک نمونه سرویس جدید و منحصر به فرد دریافت می کند.

سطح ماژول

ما می توانیم هر ارائه دهنده ای را در سطح ماژول با تعریف آن ارائه کنیم providers اموال، به عنوان مثال:

@NgModule({
  declarations: [
    FlagComponent
  ],
  imports: [
  ],
  providers: [FlagService],
})
export class FlagModule { }

یعنی FlagService نمونه یکسانی را در تمام ماژول ها و اجزای مورد استفاده در آن ارائه می دهد FlagModule.

سطح مؤلفه

مانند بالا، می‌توانیم از ارائه‌دهنده در سطح مؤلفه با افزودن آن به آن استفاده کنیم providers ویژگی. همان نمونه و همه اجزای کودکان در داخل آن جزء به اشتراک گذاشته خواهد شد.

سطح مسیر

برای کاهش واردات و خطوط کد در کامپوننت‌ها، می‌توانیم ارائه‌دهندگان را روی پیکربندی مسیر قرار دهیم، به عنوان مثال:

export const appRoutes: Routes = [
    {
        path: 'flag',
        loadChildren: () => import('./flag/flag.module').then(m => m.FlagModule),
        providers: [
            FlagService,
        ],
    }
]

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

برای دسترسی به یک ارائه دهنده، می توانیم از دو راه استفاده کنیم:

• inject عملکرد در بدنه کلاس یا useFactory ارائه دهنده، به عنوان مثال:

readonly myInstance = inject(MyService);

• constructor، مثلا:

constructor(readonly myInstance: MyInstance) {}

پیکربندی استفاده مستقیم ارائه دهندگان

گاهی اوقات می خواهیم استفاده از ارائه دهنده را حذف کنیم، یا ممکن است اختیاری باشد. Angular پرچم های اختصاصی برای ارائه دهندگان برای تنظیم آن دارد.

• Optional – ارائه‌دهنده را به‌عنوان اختیاری علامت‌گذاری می‌کند و وقتی ارائه نشده است اما برمی‌گردد، خطایی ایجاد نمی‌کند null بجای،
• Self – به دنبال ارائه دهنده خواهد بود فقط در سطح جزء یا دستورالعمل فعلی
• SkipSelf – از مؤلفه یا دستورالعمل فعلی صرف نظر می کند و به دنبال ارائه دهنده در سطح والد می گردد،
• Host – به دنبال ارائه دهنده ای تا سطح میزبان خواهد بود.

برای اعمال آن پرچم ها با inject روش، می توانیم آنها را به عنوان یک شی پیکربندی اضافه کنیم، به عنوان مثال:

  readonly list = inject(MyDataAbstarct, { optional: true })?.itemsList;

یا اگر از سازنده استفاده می کنیم، باید یک دکوراتور اختصاصی اضافه کنیم:

  constructor(
    @Optional() readonly list: MyDataAbstarct,
  ) {}

خلاصه

Angular مکانیزم قدرتمندی برای ارائه مقادیر دارد و منابع مشترک را با روش های زیادی برای پیکربندی آن به اشتراک می گذارد. دانستن آن به توسعه دهندگان اجازه می دهد تا کدهای قابل استفاده مجدد و تمیز بنویسند. در اینجا می توانید جزئیات بیشتری را بیابید.