آموزش تزریق وابستگی در انگولار 2

3 سال پیش

امتیاز دهید post

آموزش تزریق وابستگی در انگولار 2

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش تزریق وابستگی در انگولار 2 خواهیم پرداخت.

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

مرحله 1 – یک کلاس جداگانه ایجاد کنید که دارای تزئین تزریقی است. تزئین تزریقی اجازه می دهد تا عملکرد این کلاس در هر ماژول Angular JS تزریق و مورد استفاده قرار گیرد.

@Injectable() 
   export class classname {  
}

@Injectable()

export class classname {

}

مرحله 2 – بعد در ماژول برنامه کامپوننت یا ماژولی که می خواهید از سرویس در آن استفاده کنید، باید آن را به عنوان ارائه دهنده درComponent decorator تعریف کنید.

@Component ({  
   providers : [classname] 
})

@Component ({

providers : [classname]

})

بیایید به یک مثال در مورد چگونگی دستیابی به این هدف نگاه کنیم.

مرحله 1 – یک فایل ts برای سرویس به نام app.service.ts ایجاد کنید.

Ts File

مرحله 2 – کد زیر را در پرونده ایجاد شده در بالا قرار دهید.

import { 
   Injectable 
} from '@angular/core'; 

@Injectable() 
export class appService {  
   getApp(): string { 
      return "Hello world"; 
   } 
}

import {

Injectable

} from '@angular/core';

@Injectable()

export class appService {

getApp(): string {

return "Hello world";

}

نکات زیر باید در مورد برنامه فوق ذکر شود.

دکوراتور قابل تزئین از ماژول angular/core وارد می شود.
ما در حال ایجاد یک کلاس به نام appService هستیم که با دکوراتور قابل تزئین، تزئین شده است.
ما یک تابع ساده به نام getApp ایجاد می کنیم که یک رشته ساده به نام “Hello world” را برمی گرداند.

مرحله 3 – در فایل app.component.ts کد زیر را قرار دهید.

import { 
   Component 
} from '@angular/core';  

import { 
   appService 
} from './app.service';  

@Component({ 
   selector: 'my-app', 
   template: '&lt;div&gt;{{value}}&lt;/div&gt;', 
   providers: [appService]  
}) 

export class AppComponent { 
   value: string = ""; 
   constructor(private _appService: appService) { } 
   ngOnInit(): void { 
      this.value = this._appService.getApp(); 
   }   
}

import {

Component

} from '@angular/core';

import {

appService

} from './app.service';

@Component({

selector: 'my-app',

template: '<div>{{value}}</div>',

providers: [appService]

})

export class AppComponent {

value: string = "";

constructor(private _appService: appService) { }

ngOnInit(): void {

this.value = this._appService.getApp();

}

نکات زیر باید در مورد برنامه فوق ذکر شود.

اول ، ما ماژول appService خود را در ماژول appComponent وارد می کنیم.
سپس ما سرویس را به عنوان ارائه دهنده در این ماژول ثبت می کنیم.
در سازنده یک متغیر به نام _appService از نوع appService تعریف می کنیم تا بتوان آن را در هر نقطه از ماژول appComponent فراخوانی کرد.
به عنوان مثال در ngOnInit lifecyclehook ، تابع getApp سرویس را فراخوانی کردیم و خروجی را به ویژگی مقدار کلاس AppComponent اختصاص دادیم.

همه تغییرات کد را ذخیره کرده و مرورگر را تازه کنید، خروجی زیر را دریافت خواهید کرد.

Hello World

منبع.

لیست جلسات قبل آموزش آنگولار 2

امتیاز دهید post

برچسب ها : آموزش انگولار 2 آموزش طراحی وب سایت

نویسنده مطلب saber

آموزش تزریق وابستگی در انگولار 2

لیست جلسات قبل آموزش آنگولار 2

دیدگاه شما

بدون دیدگاه

لیست جلسات قبل آموزش آنگولار 2

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه