Angular設(shè)計模式hierarchical?injector實(shí)現(xiàn)代碼復(fù)用模塊化
Angular 的 "dependency injection"
Angular 的 "dependency injection" 是一種設(shè)計模式,它可以幫助我們更有效地組織和共享代碼。在 Angular 中,我們可以通過注入服務(wù)(一個常見的可注入對象類型)到組件、指令或其他服務(wù)中,實(shí)現(xiàn)代碼的復(fù)用和模塊化。
Angular 的注入器系統(tǒng)是分層級的,也被稱為 "hierarchical injector"。這意味著你可以在不同的層級創(chuàng)建和注入服務(wù),從而決定它們的作用范圍和共享行為。
工作原理
舉個例子,假設(shè)你有一個 LoggerService
用于記錄應(yīng)用的日志信息。你可以在應(yīng)用的根模塊 AppModule
中提供這個服務(wù):
import { LoggerService } from './logger.service'; @NgModule({ providers: [ LoggerService ], ... }) export class AppModule { }
這樣,LoggerService
就成了一個單例服務(wù),整個應(yīng)用只會有一個 LoggerService
實(shí)例。你可以在任何需要的地方注入這個服務(wù):
import { LoggerService } from './logger.service'; @Component({ ... }) export class SomeComponent { constructor(private logger: LoggerService) { this.logger.log('Hello World!'); } }
然而,有時候你可能希望在某個特定的組件及其子組件中使用一個獨(dú)立的 LoggerService
實(shí)例。這時,你就可以在那個組件的元數(shù)據(jù)中提供 LoggerService
:
import { LoggerService } from './logger.service'; @Component({ providers: [ LoggerService ], ... }) export class SomeSpecificComponent { constructor(private logger: LoggerService) { this.logger.log('Hello Specific World!'); } }
在這種情況下,SomeSpecificComponent
及其所有子組件中注入的 LoggerService
都會是這個新的實(shí)例,而不是在 AppModule
中提供的單例。
這就是 Angular 的 "hierarchical injector" 的工作原理。每個注入器都有一個父注入器,當(dāng)你嘗試在某個組件中注入服務(wù)時,Angular 會首先在該組件的注入器中查找該服務(wù),如果沒找到,就會去父注入器中查找,這個過程會一直持續(xù)到根注入器。如果在整個過程中都沒找到該服務(wù),Angular 就會拋出錯誤。
以上就是Angular設(shè)計模式hierarchical injector實(shí)現(xiàn)代碼復(fù)用模塊化的詳細(xì)內(nèi)容,更多關(guān)于Angular hierarchical injector的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Angularjs實(shí)現(xiàn)上傳圖片預(yù)覽功能
本文通過實(shí)例代碼給大家介紹了Angularjs實(shí)現(xiàn)上傳圖片預(yù)覽功能,非常不錯,具有參考借鑒價值,需要的朋友參考下吧2017-09-09詳解基于Angular4+ server render(服務(wù)端渲染)開發(fā)教程
本篇文章主要介紹了詳解基于Angular4+ server render(服務(wù)端渲染)開發(fā)教程 ,具有一定的參考價值,有興趣的可以了解一下2017-08-08解決angular2 獲取到的數(shù)據(jù)無法實(shí)時更新的問題
今天小編就為大家分享一篇解決angular2 獲取到的數(shù)據(jù)無法實(shí)時更新的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08