這篇文章給大家介紹如何理解Angular中的組件通訊和依賴注入，內(nèi)容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

成都創(chuàng)新互聯(lián)公司，專注為中小企業(yè)提供官網(wǎng)建設(shè)、營銷型網(wǎng)站制作、響應(yīng)式網(wǎng)站開發(fā)、展示型成都網(wǎng)站建設(shè)、成都做網(wǎng)站等服務(wù)，幫助中小企業(yè)通過網(wǎng)站體現(xiàn)價值、有效益。幫助企業(yè)快速建站、解決網(wǎng)站建設(shè)與網(wǎng)站營銷推廣問題。

Angular組件間怎么進行通訊？依賴注入是什么？

1.  組件通訊

1.1  向組件內(nèi)部傳遞數(shù)據(jù)

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

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

注意：在屬性的外面加 [] 表示綁定動態(tài)值，在組件內(nèi)接收后是布爾類型，不加 [] 表示綁定普通值，在組件內(nèi)接收后是字符串類型?！鞠嚓P(guān)教程推薦：《angular教程》】

1.2  組件向外部傳遞數(shù)據(jù)

需求：在子組件中通過點擊按鈕將數(shù)據(jù)傳遞給父組件

click

// 子組件類
import { EventEmitter, Output } from "@angular/core"

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

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

2.   依賴注入

2.1  概述

依賴注入 ( Dependency Injection ) 簡稱DI，是面向?qū)ο缶幊讨械囊环N設(shè)計原則，用來減少代碼之間的耦合度

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)

EmailSender 類運行時要使用 MailService 類，EmailSender 類依賴 MailService 類，MailService 類是 EmailSender 類的依賴項。

以上寫法的耦合度太高，代碼并不健壯。如果 MailService 類改變了參數(shù)的傳遞方式，在 EmailSender 類中的寫法也要跟著改變

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

在實例化 EmailSender 類時將它的依賴項通過 constructor 構(gòu)造函數(shù)參數(shù)的形式注入到類的內(nèi)部，這種寫法就是依賴注入。

通過依賴注入降了代碼之間的耦合度，增加了代碼的可維護性。MailService 類中代碼的更改再也不會影響 EmailSender 類

2.2  DI 框架

Angular 有自己的 DI 框架，它將實現(xiàn)依賴注入的過程隱藏了，對于開發(fā)者來說只需使用很簡單的代碼就可以使用復(fù)雜的依賴注入功能。

在 Angular 的 DI 框架中有四個核心概念：

• Dependency：組件要依賴的實例對象，服務(wù)實例對象

• Token：獲取服務(wù)實例對象的標(biāo)識

• Injector：注入器，負責(zé)創(chuàng)建維護服務(wù)類的實例對象并向組件中注入服務(wù)實例對象。

• Provider：配置注入器的對象，指定創(chuàng)建服務(wù)實例對象的服務(wù)類和獲取實例對象的標(biāo)識。

2.2.1  注入器 Injectors

注入器負責(zé)創(chuàng)建服務(wù)類實例對象，并將服務(wù)類實例對象注入到需要的組件中

• 創(chuàng)建注入器

  import { ReflectiveInjector } from "@angular/core"
  // 服務(wù)類
  class MailService {}
  // 創(chuàng)建注入器并傳入服務(wù)類
  const injector = ReflectiveInjector.resolveAndCreate([MailService])

• 獲取注入器中的服務(wù)類實例對象

  const mailService = injector.get(MailService)

• 服務(wù)實例對象為單例模式，注入器在創(chuàng)建服務(wù)實例后會對其進行緩存

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

• 不同的注入器返回不同的服務(wù)實例對象

  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

• 服務(wù)實例的查找類似函數(shù)作用域鏈，當(dāng)前級別可以找到就使用當(dāng)前級別，當(dāng)前級別找不到去父級中查找

  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  提供者 Provider

• 配置注入器的對象，指定了創(chuàng)建實例對象的服務(wù)類和訪問服務(wù)實例對象的標(biāo)識

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

• 訪問依賴對象的標(biāo)識也可以是字符串類型

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

將實例對象和外部的引用建立了松耦合關(guān)系，外部通過標(biāo)識獲取實例對象，只要標(biāo)識保持不變，內(nèi)部代碼怎么變都不會影響到外部

關(guān)于如何理解Angular中的組件通訊和依賴注入就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。