Membawa anda memahami komunikasi komponen dan suntikan pergantungan dalam Angular

SudutBagaimana untuk berkomunikasi antara komponen? Apakah suntikan pergantungan? Artikel berikut akan memberi anda pemahaman ringkas tentang kaedah komunikasi komponen dan memperkenalkan suntikan pergantungan Saya harap ia akan membantu anda!

1. Komunikasi komponen

1.1 Menghantar data ke bahagian dalam komponen

<app-favorite [isFavorite]="true"></app-favorite>

// favorite.component.ts
import { Input } from '@angular/core';

export class FavoriteComponent {
    @Input() isFavorite: boolean = false;
}

Nota: Menambah [] di luar atribut bermakna mengikat nilai dinamik, iaitu jenis Boolean selepas diterima dalam komponen Bukan menambah [] bermakna mengikat nilai normal Ia adalah jenis rentetan selepas diterima dalam komponen. [Tutorial berkaitan yang disyorkan: "tutorial sudut"]

1.2 Komponen menghantar data ke luar

Keperluan : Hantar data kepada komponen induk dengan mengklik butang dalam komponen anak

<!-- 子组件模板 -->
<button (click)="onClick()">click</button>

// 子组件类
import { EventEmitter, Output } from "@angular/core"

export class FavoriteComponent {
  @Output() change = new EventEmitter()
  onClick() {
    this.change.emit({ name: "张三" })
  }
}

<!-- 父组件模板 -->
<app-favorite (change)="onChange($event)"></app-favorite>

// 父组件类
export class AppComponent {
  onChange(event: { name: string }) {
    console.log(event)
  }
}

2

2.1 Gambaran KeseluruhanSuntikan kebergantungan (

, ialah prinsip reka bentuk dalam pengaturcaraan berorientasikan objek yang digunakan untuk mengurangkan bilangan jurang kod antara Darjah gandingan kelas Dependency InjectionDI

class MailService {
  constructor(APIKEY) {}
}

class EmailSender {
  mailService: MailService
  constructor() {
    this.mailService = new MailService("APIKEY1234567890")
  }

  sendMail(mail) {
    this.mailService.sendMail(mail)
  }
}

const emailSender = new EmailSender()
emailSender.sendMail(mail)

semasa berjalan, kelas EmailSender bergantung pada kelas MailService dan kelas EmailSender ialah kebergantungan kepada kelas MailService. MailServiceEmailSenderTahap gandingan kaedah penulisan di atas terlalu tinggi dan kodnya tidak mantap. Jika kelas

juga mesti berubah dengan sewajarnya MailServiceEmailSender

class EmailSender {
  mailService: MailService
  constructor(mailService: MailService) {
    this.mailService = mailService;
  }
}
const mailService = new MailService("APIKEY1234567890")
const emailSender = new EmailSender(mailService)

Bentuk parameter pembina disuntik ke bahagian dalam kelas Cara penulisan ini ialah suntikan pergantungan. EmailSenderconstructorSuntikan kebergantungan mengurangkan gandingan antara kod dan meningkatkan kebolehselenggaraan kod.

kelas MailServiceEmailSender

2.2 rangka kerja DI

sendiri, yang menyembunyikan proses melaksanakan suntikan kebergantungan Pembangun hanya perlu menggunakan kod yang sangat mudah untuk menggunakan fungsi suntikan kebergantungan yang kompleks. AngularDITerdapat empat konsep teras dalam rangka kerja

: AngularDI

• : objek contoh yang bergantung pada komponen, objek contoh perkhidmatan

  Dependency

• : Dapatkan identiti objek contoh perkhidmatan

  Token

• : Penyuntik, bertanggungjawab untuk mencipta dan menyelenggara objek contoh perkhidmatan kelas dan menghantarnya ke komponen Suntikan objek contoh perkhidmatan ke dalam.

  Injector

• : Konfigurasikan objek penyuntik, nyatakan kelas perkhidmatan untuk mencipta objek contoh perkhidmatan dan dapatkan pengecam objek contoh.

  Provider

InjectorsPenyuntik bertanggungjawab untuk mencipta objek contoh kelas perkhidmatan dan menyuntik objek contoh kelas perkhidmatan ke dalam < yang diperlukan 🎜>

• import { ReflectiveInjector } from "@angular/core"
  // 服务类
  class MailService {}
  // 创建注入器并传入服务类
  const injector = ReflectiveInjector.resolveAndCreate([MailService])

  Salin selepas log masuk
  Dapatkan objek contoh kelas perkhidmatan dalam penyuntik

• const mailService = injector.get(MailService)

  Salin selepas log masuk
  Objek contoh perkhidmatan berada dalam mod tunggal dan penyuntik akan cache selepas mencipta tika perkhidmatan

• const mailService1 = injector.get(MailService)
  const mailService2 = injector.get(MailService)
  
  console.log(mailService1 === mailService2) // true

  Salin selepas log masuk
  Penuntik yang berbeza mengembalikan objek Ins perkhidmatan yang berbeza

• const injector = ReflectiveInjector.resolveAndCreate([MailService])
  const childInjector = injector.resolveAndCreateChild([MailService])
  
  const mailService1 = injector.get(MailService)
  const mailService2 = childInjector.get(MailService)
  
  console.log(mailService1 === mailService2) // false

  Salin selepas log masuk
  Carian contoh perkhidmatan adalah serupa dengan rantaian skop fungsi Jika tahap semasa boleh ditemui, gunakan tahap semasa Jika tahap semasa tidak ditemui, pergi ke peringkat ibu bapa untuk mencari

• const injector = ReflectiveInjector.resolveAndCreate([MailService])
  const childInjector = injector.resolveAndCreateChild([])
  
  const mailService1 = injector.get(MailService)
  const mailService2 = childInjector.get(MailService)
  
  console.log(mailService1 === mailService2) // true

  Salin selepas log masuk
2.2.2 Pembekal

Provider

• const injector = ReflectiveInjector.resolveAndCreate([
    { provide: MailService, useClass: MailService }
  ])

  Salin selepas log masuk
  Pengecam objek bergantung akses juga boleh menjadi jenis rentetan

• const injector = ReflectiveInjector.resolveAndCreate([
    { provide: "mail", useClass: MailService }
  ])
  const mailService = injector.get("mail")

  Salin selepas log masuk

• useValue

  const injector = ReflectiveInjector.resolveAndCreate([
    {
      provide: "Config",
      useValue: Object.freeze({
        APIKEY: "API1234567890",
        APISCRET: "500-400-300"
      })
    }
  ])
  const Config = injector.get("Config")

  Salin selepas log masuk
  mewujudkan hubungan gandingan yang longgar antara objek contoh dan rujukan luaran Objek luaran memperoleh objek contoh melalui pengecam. Selagi pengecam kekal tidak berubah, kod dalaman tidak akan berubah Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati:

  Video Pengaturcaraan

  ! !

  Atas ialah kandungan terperinci Membawa anda memahami komunikasi komponen dan suntikan pergantungan dalam Angular. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!