Sharing Code

Kodni ulashish

Qaramliklarni in'ektsiya qilish orqali kodni ulashing.

Komponentlar o'rtasida mantiqni ulash kerak bo'lganda, Angular qaramliklarni in'ektsiya qilish dizayn naqshidan foydalanadi, bu sizga "xizmat" yaratishga imkon beradi va bu kodni komponentlarga in'ektsiya qilish bilan birga uni yagona haqiqat manbasidan boshqarish imkonini beradi.

Xizmatlar nima?

Xizmatlar — bu qayta foydalanish mumkin bo'lgan kod bo'lib, ular in'ektsiya qilinadi.

Komponentni aniqlashga o'xshab, xizmatlar quyidagi tarkibiy qismlardan iborat:

• @Injectable dekoratori orqali sinfni Angular xizmati sifatida e'lon qilish va providedIn xususiyati orqali qaysi qismda foydalanishni aniqlash (odatda root deb belgilanadi), bu xizmatni ilova doirasida istalgan joyda kirish imkonini beradi.
• Xizmat in'ektsiya qilinganda foydalanish mumkin bo'lgan kerakli kodni aniqlaydigan TypeScript sinfi.

Quyida Calculator xizmatining misoli keltirilgan.

import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root',
})
export class CalculatorService {
  add(x: number, y: number) {
    return x + y;
  }
}

Xizmatdan qanday foydalanish kerak

Xizmatni komponentda ishlatmoqchi bo'lganingizda, quyidagilarni bajarishingiz kerak:

• Xizmatni import qiling.
• Sinf maydonini e'lon qiling va unga in'ektsiya qilingan xizmatni tayinlang. Bu uchun Angular'ning inject funksiyasidan foydalaning.

Bu quyidagi ko'rinishda bo'lishi mumkin:

import { Component, inject } from '@angular/core';
import { CalculatorService } from './calculator.service';
@Component({
  selector: 'app-receipt',
  template: `<h1>Jami summa {{ totalCost }}</h1>`,
})
export class Receipt {
  private calculatorService = inject(CalculatorService);
  totalCost = this.calculatorService.add(50, 25);
}

Ushbu misolda, CalculatorService inject funksiyasi yordamida in'ektsiya qilinmoqda va xizmatdan foydalanilmoqda.