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 (

), dirujuk sebagai

, 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)

ialah menggunakan kelas

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

mengubah cara parameter dihantar, kaedah penulisan dalam kelas

juga mesti berubah dengan sewajarnya MailServiceEmailSender

Apabila menginstant kelas

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

, lulus kebergantungannya melalui

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

Perubahan kod dalam kelas tidak lagi akan menjejaskan

kelas MailServiceEmailSender

2.2 rangka kerja DI

mempunyai rangka kerja

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

2.2.1 Penyuntik

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

Buat penyuntik dalam komponen

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

  Dapatkan objek contoh kelas perkhidmatan dalam penyuntik

• const mailService = injector.get(MailService)

  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

  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

  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

2.2.2 Pembekal

Provider

Konfigurasikan objek penyuntik, nyatakan perkhidmatan yang mencipta objek contoh Pengecam kelas dan objek contoh perkhidmatan akses

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

  Pengecam objek bergantung akses juga boleh menjadi jenis rentetan

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

• useValue

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

  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!