成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

Angular6的服務(wù)和依賴注入

sugarmo / 2905人閱讀

摘要：把組件和服務(wù)區(qū)分開，以提高模塊性和復(fù)用性。而要把這些任務(wù)委托給各種服務(wù)。它只會通過依賴注入讓你能更容易地將應(yīng)用邏輯分解為服務(wù)，并讓這些服務(wù)可用于各個組件中。

Angular 把組件和服務(wù)區(qū)分開，以提高模塊性和復(fù)用性。

通過把組件中和視圖有關(guān)的功能與其他類型的處理分離開，你可以讓組件類更加精簡、高效。 理想情況下，組件的工作只管用戶體驗，而不用顧及其它。 它應(yīng)該提供用于數(shù)據(jù)綁定的屬性和方法，以便作為視圖（由模板渲染）和應(yīng)用邏輯（通常包含一些模型的概念）的中介者。

組件不應(yīng)該定義任何諸如從服務(wù)器獲取數(shù)據(jù)、驗證用戶輸入或直接往控制臺中寫日志等工作。 而要把這些任務(wù)委托給各種服務(wù)。通過把各種處理任務(wù)定義到可注入的服務(wù)類中，你可以讓它可以被任何組件使用。 通過在不同的環(huán)境中注入同一種服務(wù)的不同提供商，你還可以讓你的應(yīng)用更具適應(yīng)性。

Angular 不會強制遵循這些原則。它只會通過依賴注入讓你能更容易地將應(yīng)用邏輯分解為服務(wù)，并讓這些服務(wù)可用于各個組件中。

在Angular中使用服務(wù),首先根據(jù)需要的功能,寫一個服務(wù)類(angular中稱為provider),然后將該服務(wù)類注冊到注入器中(應(yīng)用啟動時自動創(chuàng)建),之后就可以在組件類或其他服務(wù)中通過Angular的依賴注入系統(tǒng)使用了,Angular會自動將該類實例化,并處理好依賴關(guān)系.

在Angular中有很多方式可以將服務(wù)類注冊到注入器中:

@Injectable 元數(shù)據(jù)中的providedIn屬性

@NgModule 元數(shù)據(jù)中的 providers屬性

@Component 元數(shù)據(jù)中的 providers屬性

不同的注冊方式,生成的服務(wù)也有所不同.

在服務(wù)類的 @Injectable 裝飾器中:

//service
@Injectable({
    providedIn: "root",
})

providedIn: "root" 告訴 Angular在根注入器中注冊這個服務(wù),這也是使用CLI生成服務(wù)時默認的方式.
這種方式注冊,不需要再@NgModule裝飾器中寫providers,而且在代碼編譯打包時,可以執(zhí)行搖樹優(yōu)化，會移除所有沒在應(yīng)用中使用過的服務(wù)。推薦使用此種方式注冊服務(wù).

在模塊@NgModule 中的 providers

//service
@Injectable()
//module
@NgModule({
    providers: [
        UserService,
        { provide: APP_CONFIG, useValue: HERO_DI_CONFIG }
    ],
})

這種方式注冊,可以對服務(wù)進行一些額外的配置(服務(wù)類中也需要寫@Injectable()裝飾器).

在組件 @Component 中的 providers

@Component({
selector: "app-heroes",
providers: [ HeroService ]

這種方式注冊,會注冊到每個組件實例自己的注入器上。(多個組件會有多個注入器)

不提供服務(wù)類

最常見的圖紙是class,但是在配置providers: []時,也可以不提供服務(wù)類,而是返回對象的工廠函數(shù),或是對象字面量[{ provide: Logger, useClass: Logger }]
也可以使用useValue屬性直接交付一個對象實例,[{ provide: Logger, useValue: silentLogger }]

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/95712.html

相關(guān)文章

  • 【CuteJavaScript】Angular6入門項目（3.編寫服務(wù)和引入RxJS）

    摘要：發(fā)布通過回調(diào)方法向發(fā)布事件。觀察者一個回調(diào)函數(shù)的集合，它知道如何去監(jiān)聽由提供的值。 本文目錄 一、項目起步 二、編寫路由組件 三、編寫頁面組件 1.編寫單一組件 2.模擬數(shù)據(jù) 3.編寫主從組件 四、編寫服務(wù) 1.為什么需要服務(wù) 2.編寫服務(wù) 五、引入RxJS 1.關(guān)于RxJS 2.引入RxJS 3.改造數(shù)據(jù)獲取方式 六、改造組件 1.添...

    RebeccaZhong 評論0 收藏0

  • Angular6錯誤 Service: No provider for Renderer2

    摘要：解決辦法很簡單，既然無法注入就不注入。可以利用工廠類代替直接注入的方式。示例代碼如下利用對象去操作元素即可 這個錯誤一般是在構(gòu)造函數(shù)中 注入 Renderer2 引起的。 解決辦法很簡單，既然無法注入Renderer2就不注入。可以利用工廠類RendererFactory2 代替直接注入Renderer2的方式。示例代碼如下： import { Renderer2, RendererF...

    rickchen 評論0 收藏0

  • 初探Angular6.x---主從組件

    摘要：在上一篇博文用戶列表與詳情展示中我們用實現(xiàn)了用戶列表的展示并通過語法實現(xiàn)了列表單擊時將單擊的對象傳到后臺的功能最后為了防止初次加載對象為空導(dǎo)致的錯誤我們又使用了語法來對要展示的詳情對象進行判空操作但隨著后續(xù)模塊的增多以及業(yè)務(wù)的交叉我們 　　　在上一篇博文《Angular6.x---用戶列表與詳情展示》中,我們用ngFor=let object of list實現(xiàn)了用戶列表的展示,并通過...

    FingerLiu 評論0 收藏0

  • 【CuteJavaScript】Angular6入門項目（4.改造組件和添加HTTP服務(wù)）

    摘要：然后我們在父組件上添加事件監(jiān)聽，并傳入本地的在對應(yīng)的中添加方法再來，我們在子組件上多導(dǎo)入和，并添加修飾器和調(diào)用這樣就實現(xiàn)了我們父子組件之間的事件傳遞啦，現(xiàn)在我們的頁面還是正常運行，并且刪除一條數(shù)據(jù)后，頁面數(shù)據(jù)會更新。 本文目錄 一、項目起步 二、編寫路由組件 三、編寫頁面組件 1.編寫單一組件 2.模擬數(shù)據(jù) 3.編寫主從組件 四、編寫服務(wù) 1.為什么需要服務(wù) ...

    BDEEFE 評論0 收藏0

  • 【CuteJavaScript】Angular6入門項目（1.構(gòu)建項目和創(chuàng)建路由）

    摘要：啟動服務(wù)，并打開新窗口可簡寫創(chuàng)建新組件可簡寫創(chuàng)建新服務(wù)創(chuàng)建路由模塊其他另外還有很多的命令提供，詳細可以查閱官方文檔命令。引入路由模塊導(dǎo)出路由模塊的指令這里需要添加一個數(shù)組，并傳入，導(dǎo)出讓路由器的相關(guān)指令可以在中的組件中使用。 本文目錄 一、項目起步 二、編寫路由組件 三、編寫頁面組件 1.編寫單一組件 2.模擬數(shù)據(jù) 3.編寫主從組件 四、編寫服務(wù) 1.為什么需要服務(wù) 2....

    bergwhite 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<