欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

如何理解Angular中的組件通訊和依賴注入

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

成都創(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)價(jià)值、有效益。幫助企業(yè)快速建站、解決網(wǎng)站建設(shè)與網(wǎng)站營銷推廣問題。

Angular組件間怎么進(jìn)行通訊？依賴注入是什么？

1.  組件通訊

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

<app-favorite [isFavorite]="true"></app-favorite>
// favorite.component.ts
import { Input } from '@angular/core';

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

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

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

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

<!-- 子組件模板 -->
<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  概述

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

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 類運(yùn)行時(shí)要使用 MailService 類，EmailSender 類依賴 MailService 類，MailService 類是 EmailSender 類的依賴項(xiàng)。

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

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

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

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

2.2  DI 框架

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

在 Angular 的 DI 框架中有四個(gè)核心概念：

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

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

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

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

2.2.1  注入器 Injectors

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

  • 創(chuàng)建注入器

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

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

    const mailService = injector.get(MailService)

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

    const mailService1 = injector.get(MailService)
const mailService2 = injector.get(MailService)

console.log(mailService1 === mailService2) // true

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

    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í)例的查找類似函數(shù)作用域鏈，當(dāng)前級(jí)別可以找到就使用當(dāng)前級(jí)別，當(dāng)前級(jí)別找不到去父級(jí)中查找

    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

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

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

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

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

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

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

當(dāng)前題目：如何理解Angular中的組件通訊和依賴注入
文章出自：http://www.chinadenli.net/article28/pescjp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、網(wǎng)站制作、移動(dòng)網(wǎng)站建設(shè)、品牌網(wǎng)站制作、營銷型網(wǎng)站建設(shè)、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

成都定制網(wǎng)站建設(shè)