angular 注入器配置 angular依賴注入

2021-10-13 03:57:39 字數 1685 閱讀 4419

一、imports,declarations,providers介紹

imports中寫入的是當前模組匯入的其他模組,故imports應該匯入的是module;declarations中寫入的是當前模組內包含的公共元件、指令資訊,故其中應該是宣告的是components;prividers是匯入當前模組可以使用的公共服務,也可以是其他npm包中的服務,故其中匯入的應該是service。**示例如下:

@ngmodule(],

其中provides中匯入服務有較多的形式,將在下文做詳細的介紹。

二、定義提供器的方式

1.基本方式

providers: [loginuserinfoservice]

基本方式中,可以直接在provides中將需要的服務寫入,相當於使用new例項化了乙個物件,這樣的話就可以在其他的服務或者元件中使用該服務。

2.uerclass

providers:

使用useclass可以根據需要,選擇注入非預設的服務。

3.usefactory

providers: [

// provide: userinfoservice,

usefactory: () => else

provide: userinfoservice,

usefactory: isdev => else

}其中16行為為注入了乙個變數,在其他需要的地方就可以注入這個變數,如可以先在3中的usefactory的deps中注入這個變數,然後就可以在其中使用。當然,usevalue可以是乙個普通變數,也可以是乙個物件(如上述**17行所示)。

三、多級注入器

1.在@injectable級進行配置

@injectable()裝飾器會標出每乙個服務類。服務類的元資料選項providerin會指定乙個注入器,同常會使用root作為該服務的提供商。當可注入的類向root注入器提供了自己的服務時,任何匯入該類的地方都能使用這個服務。

import from '@angular/core';

import from '../user';

import from './user-info.service';

@injectable(

在其他服務中使用該服務(**只展示部分內容):

import from '../service/login-user-info.service';

constructor(private loginuserinfoservice: loginuserinfoservice) {}

除了指給root注入器之外,我們還可以將providerin設定為某個特定的ngmodule。一般來說,這中寫法和在@ngmodule本身的裝飾器上配置注入器沒有多少的不同,主要的區別就是如果@ngmodule沒有用到改服務,那麼它可以被優化掉。

2.@ngmodule級注入器

providers:

3.component級注入器

ngmodule 中每個元件都有它自己的注入器。 通過使用 @component 元資料在元件級配置某個提供商,你可以把這個提供商的範圍限定到該元件及其子元件。以下**摘至angular中文網:

import from '@angular/core';

import from './hero.service';

@component(

四、參考文獻

[2] 慕課網課程

Angular 依賴注入

依賴注入是實現控制反轉的一種實現方式,好處在於 降低耦合 使用元件常用性提高 便於測試 在angular中實現依賴注入需要三步 1.建立乙個service,這個service就是要依賴注入的物件 2.寫提供器 3.在建構函式中注入 angular 只允許在建構函式中注入 先建立乙個service n...

Angular 依賴注入

基本介紹 1 angularjs採用模組化的方式組織 將一些通用邏輯封裝成乙個物件或函式,實現最大程度的復用,這導致了使用者和被使用者之間存在依賴關係。2 所謂依賴注入是指在執行時自動查詢依賴關係,然後將查詢到依賴傳遞給使用者的一種機制。3 常見的angularjs內建服務有 http locati...

angular配置服務與注入的步驟

輸入下面的命令,就會自動建立2個檔案hero.service.spec.ts跟hero.service.ts,第乙個為用於單元測試的檔案,第二個為服務的配置檔案 ng g service service herohero.service.ts import from angular core inj...