首頁 >web前端 >js教程 >帶你了解Angular中的元件通訊和依賴注入

帶你了解Angular中的元件通訊和依賴注入

青灯夜游轉載: 2021-09-22 10:28:291853瀏覽

Angular元件間怎麼進行通訊？依賴注入是什麼？以下這篇文章帶大家簡單了解元件通訊的方法，並介紹一下依賴注入，希望對大家有幫助！

1. 元件通訊

1.1 傳送資料

##<pre class="brush:html;toolbar:false;"><app-favorite [isFavorite]="true"></app-favorite></pre><pre class="brush:js;toolbar:false;">// favorite.component.ts import { Input } from &#39;@angular/core&#39;; export class FavoriteComponent { @Input() isFavorite: boolean = false; }</pre>注意：在屬性的外面加[]

表示綁定動態值，在元件內接收後是布林類型，不加

[] 表示綁定普通值，在元件內接收後是字串類型。【相關教學推薦：《angular教學》】#1.2 元件向外部傳遞資料需求：在子元件中透過點擊按鈕將資料傳遞給父元件

<!-- 子组件模板 -->
<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，是物件導向程式設計中的一種設計原則，用來減少程式碼之間的耦合度數

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

類別改變了參數的傳遞方式，在

EmailSender 類別中的寫法也要跟著改變

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

在實例化EmailSender

類時將它的依賴項透過

建構函數參數的形式註入到類別的內部，這種寫法就是依賴注入。
透過依賴注入降了程式碼之間的耦合度，增加了程式碼的可維護性。 MailService
類別中程式碼的變更再也不會影響
類別
2.2
##DI
框架
Angular
有自己的DI 框架，它將實作依賴注入的過程隱藏了，對於開發者來說只需使用很簡單的程式碼就可以使用複雜的依賴注入功能。

Angular

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

Dependency

Token
：取得服務實例物件的識別碼
Injector
Provider
：配置注入器的對象，指定建立服務實例物件的服務類別和取得實例對象的識別。

2.2.1 注入器Injectors

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

const mailService = injector.get(MailService)

服務實例物件為單例模式，注入器會在建立服務實例後會對其進行快取

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

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

不同的注入器傳回不同的服務實例對象

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

服務實例的查找類似函數作用域鏈，當前級別可以找到就使用當前級別，當前級別找不到去父級中查找

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###################設定注入器的對象，指定了建立實例物件的服務類別和存取服務實例物件的識別碼###

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

#########存取依賴物件的識別碼也可以是字串型別###

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

#########將實例物件和外部的參考建立了鬆散耦合關係，外部透過識別獲取實例對象，只要標識保持不變，內部代碼怎麼變都不會影響到外部# #####更多程式相關知識，請造訪：###程式設計影片###！！ ###

以上是帶你了解Angular中的元件通訊和依賴注入的詳細內容。更多資訊請關注PHP中文網其他相關文章！

angular 面向对象构造函数 Token 字符串布尔类型字符串类型对象作用域 constructor

陳述：

本文轉載於：juejin.cn。如有侵權，請聯絡admin@php.cn刪除

上一篇：nodejs如何新增和查詢資料庫的數據下一篇：nodejs如何新增和查詢資料庫的數據

看更多