核心要點(diǎn)

• Angular 2 組件能夠使用提供者 (providers)，提供者是一組可注入的對(duì)象，組件可以使用它們。提供者是 Angular 2 依賴注入 (DI) 系統(tǒng)的基礎(chǔ)。
• 提供者可分為三種類型：類提供者、工廠提供者和值提供者。類提供者生成類的實(shí)例，工廠提供者生成指定函數(shù)的返回值，值提供者直接返回其值。
• Angular 2 的 DI 系統(tǒng)允許註冊(cè)類、函數(shù)或值（稱為提供者），解決提供者之間的依賴關(guān)係，使提供者的結(jié)果可在代碼中使用，並維護(hù)注入器的層次結(jié)構(gòu)。
• Angular 的注入器只創(chuàng)建一次類提供者的實(shí)例，並將其緩存，只要使用相同的提供者，後續(xù)每次注入都會(huì)收到相同的實(shí)例。此功能使您可以靈活地控制任何一個(gè)提供者生成的結(jié)果，以及我們是否使用單個(gè)實(shí)例或多個(gè)實(shí)例。
• Angular 2 允許使用與實(shí)際提供者關(guān)聯(lián)的鍵（稱為“令牌”）註冊(cè)提供者。此功能對(duì)於單元測(cè)試很有用，在單元測(cè)試中，可以替換一個(gè)不會(huì)進(jìn)行服務(wù)器調(diào)用的模擬類，而無需更改組件代碼。

前文探討瞭如何使用 @Input 和 @Output 註解將數(shù)據(jù)傳入和傳出組件。本文將介紹 Angular 2 組件的另一個(gè)基本方面——它們使用 提供者 的能力。

您可能在組件配置屬性列表中看到過“提供者”，並且您可能意識(shí)到它們?cè)试S您定義一組可用於組件的可注入對(duì)象。這很好，但當(dāng)然會(huì)引出一個(gè)問題，“什麼是提供者？”

回答這個(gè)問題需要深入探討 Angular 2 的依賴注入 (DI) 系統(tǒng)。我們可能會(huì)在以後的博文中專門介紹DI，但Pascal Precht 的一系列文章對(duì)此進(jìn)行了很好的介紹，從這裡開始：http://miracleart.cn/link/f7f3bfce09a3008d185e1775549ec2d2 DI 和Angular 2 的DI 系統(tǒng)（如Pascal 的文章中所述），但簡而言之，DI 系統(tǒng)負(fù)責(zé)：

• 註冊(cè)類、函數(shù)或值。在依賴注入的上下文中，這些項(xiàng)目被稱為“提供者”，因?yàn)樗鼈儠?huì)產(chǎn)生結(jié)果。例如，類用於提供或產(chǎn)生實(shí)例。 （有關(guān)提供者類型的更多詳細(xì)信息，請(qǐng)參見下文。）
• 解決提供者之間的依賴關(guān)係——例如，如果一個(gè)提供者需要另一個(gè)提供者。
• 當(dāng)我們請(qǐng)求提供者結(jié)果時(shí)，使提供者的結(jié)果可在代碼中使用。此過程（使提供者結(jié)果可用於代碼塊）稱為“注入它”。注入提供者結(jié)果的代碼邏輯上稱為“注入器”。
• 維護(hù)注入器的層次結(jié)構(gòu)，以便如果組件請(qǐng)求其註入器中不可用的提供者的提供者結(jié)果，DI 將向上搜索注入器的層次結(jié)構(gòu)。

在之前的文章中，我們包含了一個(gè)圖表，顯示組件形成以根組件開頭的層次結(jié)構(gòu)。讓我們補(bǔ)充該圖表以包含注入器及其註冊(cè)的資源（提供者）：

圖 1：每個(gè)組件都有自己的注入器，用於註冊(cè)提供者。注入器創(chuàng)建子注入器，對(duì)提供者的請(qǐng)求從本地註入器開始，並向上搜索注入器層次結(jié)構(gòu)。

從上面我們可以看出，雖然組件形成了一個(gè)向下定向圖，但它們相關(guān)的注入器具有雙向關(guān)係：父注入器創(chuàng)建子注入器（向下），當(dāng)請(qǐng)求提供者時(shí)，如果組件自己的注入器中找不到請(qǐng)求的提供者，Angular 2 將向上搜索父注入器（向上）。這意味著較低級(jí)別具有相同標(biāo)識(shí)符的提供者將遮蓋（隱藏）較高級(jí)別具有相同名稱的提供者。

什麼是提供者？

那麼，注入器在每個(gè)級(jí)別註冊(cè)的這些“提供者”是什麼呢？實(shí)際上很簡單：提供者是 Angular 用於提供（產(chǎn)生、生成）我們想要使用的資源或 JavaScript“事物”：

• 類提供者生成/提供類的實(shí)例。
• 工廠提供者生成/提供運(yùn)行指定函數(shù)時(shí)返回的內(nèi)容。
• 值提供者不需要像前兩者那樣採取操作來提供結(jié)果，它只返回其值。

不幸的是，術(shù)語“提供者”有時(shí)既指類、函數(shù)或值，也指提供者產(chǎn)生的事物——類實(shí)例、函數(shù)的返回值或返回值。

讓我們看看如何通過使用 MyClass（一個(gè)簡單的類，將生成我們想要在應(yīng)用程序中使用的實(shí)例）創(chuàng)建類提供者來向組件添加提供者。

圖 2：具有四個(gè)屬性的簡單類。 （代碼屏幕截圖來自 Visual Studio Code）

好了，這就是類?，F(xiàn)在讓我們指示 Angular 使用它註冊(cè)類提供者，以便我們可以要求依賴注入系統(tǒng)提供一個(gè)實(shí)例供我們?cè)诖a中使用。我們將創(chuàng)建一個(gè)組件 ProvDemo_01.ts，它將用作應(yīng)用程序的根組件。我們?cè)?bootstrap.ts 中加載此組件並啟動(dòng)我們的應(yīng)用程序：

圖 3：啟動(dòng)應(yīng)用程序的 bootstrap.ts 文件，它實(shí)例化根組件。

如果上面的內(nèi)容沒有意義，請(qǐng)查看我們之前的文章，該文章介紹了構(gòu)建簡單的 Angular 2 應(yīng)用程序的過程。我們的根組件稱為 ProvDemo，存儲(chǔ)庫包含幾個(gè)不同版本的該組件。您可以通過更新上面導(dǎo)入 ProvDemo 的行來更改顯示的版本。我們的根組件的第一個(gè)版本如下所示：

圖 4：導(dǎo)入 MyClass 的 CompDemo，將其添加到 providers 數(shù)組中，並在構(gòu)造函數(shù)參數(shù)中將其用作類型。

向此組件添加 MyClass 提供者很簡單：

• 導(dǎo)入 MyClass
• 將其添加到 @Component 的 providers 屬性
• 向構(gòu)造函數(shù)添加類型為“MyClass”的參數(shù)

在幕後，當(dāng) Angular 實(shí)例化組件時(shí)，DI 系統(tǒng)會(huì)為組件創(chuàng)建一個(gè)注入器，該注入器註冊(cè) MyClass 提供者。然後，Angular 會(huì)看到在構(gòu)造函數(shù)的參數(shù)列表中指定的MyClass 類型，並查找新註冊(cè)的MyClass 提供者，並使用它來生成一個(gè)實(shí)例，然後將其分配給“myClass”（初始小寫“m”）。

查找 MyClass 提供者和生成要分配給“myClass”的實(shí)例的過程都是 Angular 完成的。它利用 TypeScript 語法來了解要搜索的類型，但 Angular 的注入器負(fù)責(zé)查找和返回 MyClass 實(shí)例。

鑑於上述情況，您可能會(huì)得出結(jié)論，Angular 會(huì)獲取“providers”數(shù)組中的類列表，並創(chuàng)建一個(gè)簡單的註冊(cè)表來檢索該類。但是，為了提高靈活性，存在一個(gè)細(xì)微的調(diào)整。需要“調(diào)整”的一個(gè)主要原因是幫助我們編寫組件的單元測(cè)試，這些組件具有我們不想在測(cè)試環(huán)境中使用的提供者。對(duì)於 MyClass，沒有太多理由不使用真實(shí)的東西，但是如果 MyClass 調(diào)用服務(wù)器來檢索數(shù)據(jù)，我們可能不想或無法在測(cè)試環(huán)境中這樣做。為了解決這個(gè)問題，我們需要能夠在 ProvDemo 中替換不會(huì)進(jìn)行服務(wù)器調(diào)用的模擬 MyClass。

我們?nèi)绾芜M(jìn)行替換？我們是否需要遍歷所有代碼並將每個(gè) MyClass 引用更改為 MyClassMock？這效率不高，並且是編寫測(cè)試的糟糕模式。

我們需要在不更改 ProvDemo 組件代碼的情況下替換提供者實(shí)現(xiàn)。為了實(shí)現(xiàn)這一點(diǎn)，當(dāng) Angular 註冊(cè)提供者時(shí)，它會(huì)設(shè)置一個(gè)映射，以將鍵（稱為“令牌”）與實(shí)際提供者相關(guān)聯(lián)。在上面的示例中，令牌和提供者是同一事物：MyClass。將 MyClass 添加到 @Component 裝飾器中的 providers 屬性是以下內(nèi)容的簡寫：

<code>providers: [ provide(MyClass, {useClass: MyClass} ]</code>

這意味著“使用MyClass 作為令牌（鍵）來查找提供者，並將提供者設(shè)置為MyClass，以便當(dāng)我們請(qǐng)求提供者時(shí)，依賴注入系統(tǒng)會(huì)返回MyClass 實(shí)例” 。我們大多數(shù)人都習(xí)慣於將鍵視為數(shù)字或字符串。但在這種情況下，令牌（鍵）是類本身。我們也可以使用字符串作為令牌來註冊(cè)提供者，如下所示：

<code>providers: [ provide("aStringNameForMyClass", {useClass: MyClass} ]</code>

那麼，這如何幫助我們進(jìn)行測(cè)試呢？這意味著在測(cè)試環(huán)境中，我們可以覆蓋提供者註冊(cè)，有效地執(zhí)行以下操作：

<code>provide(MyClass, {useClass: MyClassMock})
</code>

這會(huì)將令牌（鍵）MyClass 與類提供者 MyClassMock 關(guān)聯(lián)起來。當(dāng)我們的代碼要求 DI 系統(tǒng)在測(cè)試中註入 MyClass 時(shí)，我們會(huì)得到 MyClassMock 的實(shí)例，它可以偽造數(shù)據(jù)調(diào)用。最終效果是所有代碼保持不變，我們不必?fù)?dān)心單元測(cè)試是否會(huì)調(diào)用在測(cè)試環(huán)境中可能不存在的服務(wù)器。

注入非類提供者

在上面，我們通過編寫以下代碼將類提供者實(shí)例注入到構(gòu)造函數(shù)中：

<code>constructor( myClass: MyClass ) {...}
</code>

TypeScript 允許我們指定 myClass 參數(shù)需要是 MyClass 類型，而 DI 系統(tǒng)會(huì)完成工作，為我們提供 MyClass 實(shí)例。

但是，如果我們使用字符串令牌而不是類，我們?nèi)绾胃嬖V Angular 注入我們的提供者結(jié)果呢？讓我們編輯 bootstrap.ts 文件以添加新的值提供者並使用字符串令牌註冊(cè)它。請(qǐng)記住，值提供者是一種返回與令牌關(guān)聯(lián)的值的提供者類型。在上面的示例中，我們告訴Angular 通過添加到@Component 的providers 屬性來註冊(cè)提供者，但我們也可以通過將它們傳遞到引導(dǎo)函數(shù)中來註冊(cè)提供者（可以將相同的內(nèi)容添加到providers 屬性）：

圖 5：添加了值提供者的 bootstrap.ts。

在這裡，我們通過調(diào)用provide 函數(shù)並傳入字符串令牌（“SECURITY_KEY”）和一個(gè)對(duì)象來添加提供者，該對(duì)象指定我們想要?jiǎng)?chuàng)建一個(gè)值提供者以及提供者本身——在本例中是一個(gè)簡單值?，F(xiàn)在，我們想將值提供者生成的值注入到我們的構(gòu)造函數(shù)中，但這行不通……

<code>providers: [ provide(MyClass, {useClass: MyClass} ]</code>

這是因?yàn)椤?code>SECURITY_KEY”不是類型。為了使能夠注入具有非類令牌的提供者成為可能，Angular 為我們提供了 @Inject 參數(shù)裝飾器。與所有其他裝飾器一樣，我們需要導(dǎo)入它，然後我們使用它來告訴 Angular 注入與我們的字符串令牌關(guān)聯(lián)的提供者。為此，我們調(diào)整 create ProvDemo_02.ts：

圖 6：導(dǎo)入“Inject”裝飾器並使用它來注入使用字符串令牌標(biāo)識(shí)的值提供者。

我們可以使用相同的語法來注入 MyClass 提供者：

<code>providers: [ provide("aStringNameForMyClass", {useClass: MyClass} ]</code>

好了，我們已經(jīng)了解瞭如何註冊(cè)和使用提供者，但讓我們進(jìn)一步了解提供者返回的內(nèi)容。

提供者和單例

正如我們?cè)谏厦婵吹降?，提供者?fù)責(zé)生成要注入的事物。類提供者會(huì)生成一個(gè)實(shí)例，然後注入該實(shí)例。但是，重要的是要理解，每次注入類提供者結(jié)果時(shí)，您都不會(huì)獲得一個(gè)新實(shí)例。相反，DI 系統(tǒng)會(huì)生成一次實(shí)例，將其緩存，並且只要您使用相同的提供者，後續(xù)每次注入都會(huì)收到相同的實(shí)例。

最後一點(diǎn)很重要，因?yàn)槊總€(gè)組件都有自己的注入器及其自己的註冊(cè)提供者。 MyClass 具有設(shè)置為當(dāng)前時(shí)間（以毫秒為單位）的時(shí)間屬性和一個(gè)隨機(jī)數(shù)，以幫助我們查看我們每次是否獲得相同的實(shí)例。我們將向應(yīng)用程序添加一個(gè) ChildComp 組件。

圖 7：將 MyClass 注入到構(gòu)造函數(shù)中的 ChildComp。

請(qǐng)注意，我們導(dǎo)入 MyClass 並使用它來設(shè)置構(gòu)造函數(shù)參數(shù)列表中的類型。重要提示：導(dǎo)入的 MyClass 在 ChildComp 中的唯一用途是作為 DI 系統(tǒng)用來查找註冊(cè)提供者的令牌。 因?yàn)?ChildComp 沒有使用該令牌註冊(cè)自己的提供者，所以 Angular 會(huì)向上查找注入器層次結(jié)構(gòu)以找到一個(gè)。為了使這能夠工作，我們需要將 ChildComp 添加到 ProvDemo 組件：

圖 8：向模板中添加了 ChildComp 的 ProvDemo。

我們導(dǎo)入 ChildComp，向 @Component 添加 directives 屬性以告訴 ProvDemo 我們將使用 ChildComp 組件，並將 ChildComp 元素添加到模板。當(dāng)應(yīng)用程序運(yùn)行時(shí)，控制臺(tái)輸出顯示 ProvDemo 和 ChildComp 都收到相同的 MyClass 實(shí)例：

<code>providers: [ provide(MyClass, {useClass: MyClass} ]</code>

現(xiàn)在讓我們更改 ChildComp 以向其註入器添加 MyClass 提供者：

圖 9：定義了自己的 MyClass 提供者的 ParentComp。

我們唯一更改的是向 @Component 註解添加 providers 屬性。當(dāng)然，我們可以看到創(chuàng)建了兩個(gè)不同的 MyClass 實(shí)例：

<code>providers: [ provide("aStringNameForMyClass", {useClass: MyClass} ]</code>

Angular 的此功能為任何一個(gè)提供者生成的結(jié)果以及我們是否要使用單個(gè)實(shí)例或多個(gè)實(shí)例提供了很大的靈活性。例如，您可以將組件放在重複器中，以便多次生成組件。如果此重複組件註冊(cè)自己的提供者，則每個(gè)組件都會(huì)獲得唯一的提供者。但是，如果您只在父組件中註冊(cè)提供者，則每個(gè)重複實(shí)例都會(huì)共享父組件的提供者。

總結(jié)

在本文中，我們定義了什麼是提供者，並介紹了三種不同類型的提供者。然後，我們研究瞭如何為組件註冊(cè)提供者以及如何將提供者生成的結(jié)果注入到組件中。我們還研究了 Angular 如何使用注入器層次結(jié)構(gòu)來查找請(qǐng)求的提供者。 Angular 為您提供了更多關(guān)於依賴注入系統(tǒng)如何工作以及在何處查找提供者的控制，但以上內(nèi)容應(yīng)該可以幫助您開始在 Angular 2 應(yīng)用程序中創(chuàng)建和使用提供者。

關(guān)於 Angular 2 組件、提供者、類、工廠和值的常見問題 (FAQ)

類和工廠在 Angular 2 中有什麼區(qū)別？

在 Angular 2 中，類是創(chuàng)建對(duì)象的藍(lán)圖。它封裝了數(shù)據(jù)和操作該數(shù)據(jù)的函數(shù)。另一方面，工廠是一種用於創(chuàng)建對(duì)象的模式。在 Angular 2 中，工廠用於創(chuàng)建和配置沒有明確類來表示的服務(wù)或值。工廠提供了一種根據(jù)上下文或配置生成不同類實(shí)例的方法。

組件和提供者如何在 Angular 2 中交互？

在 Angular 2 中，組件和提供者協(xié)同工作以創(chuàng)建動(dòng)態(tài)且交互式的用戶界面。組件是 Angular 應(yīng)用程序的構(gòu)建塊，而提供者用於創(chuàng)建組件可以使用的服務(wù)。提供者允許組件共享數(shù)據(jù)和功能，從而更易於維護(hù)和更新應(yīng)用程序。

值在 Angular 2 中的作用是什麼？

Angular 2 中的值用於向應(yīng)用程序的其他部分提供配置信息。它們可以注入到控制器、服務(wù)和工廠中，允許在運(yùn)行時(shí)配置應(yīng)用程序的這些部分。這使應(yīng)用程序更靈活，也更易於測(cè)試。

如何在 Angular 2 中綁定類？

Angular 2 中的類綁定是一種動(dòng)態(tài)地向元素添加和刪除 CSS 類的方法。您可以將類綁定到表達(dá)式，當(dāng)該表達(dá)式計(jì)算結(jié)果為 true 時(shí)，該類將添加到元素。如果表達(dá)式的計(jì)算結(jié)果為 false，則該類將被刪除。這允許您創(chuàng)建動(dòng)態(tài)且交互式的用戶界面。

在 Angular 2 的上下文中，API 是什麼？

在 Angular 2 的上下文中，API（應(yīng)用程序編程接口）是一組用於構(gòu)建和交互軟件應(yīng)用程序的規(guī)則和協(xié)議。 Angular 2 提供了一個(gè)豐富的 API，允許開發(fā)人員使用更少的代碼和精力創(chuàng)建複雜的應(yīng)用程序。 Angular 2 API 包括用於創(chuàng)建組件、服務(wù)、指令、管道等的特性。

如何在 Angular 2 中使用工廠？

要在 Angular 2 中使用工廠，您首先需要定義它。這是通過創(chuàng)建一個(gè)返回您希望工廠生成的對(duì)象的函數(shù)來完成的。然後，您可以使用 .factory 方法將此工廠與 Angular 模塊註冊(cè)。註冊(cè)工廠後，您可以將其註入到應(yīng)用程序的其他部分，例如控制器和服務(wù)。

如何在 Angular 2 中創(chuàng)建組件？

在 Angular 2 中創(chuàng)建組件涉及定義一個(gè)類並使用 @Component 裝飾器對(duì)其進(jìn)行裝飾。 @Component 裝飾器告訴 Angular 該類是一個(gè)組件，並提供元數(shù)據(jù)，這些元數(shù)據(jù)確定如何在運(yùn)行時(shí)處理、實(shí)例化和使用該組件。

如何在 Angular 2 中使用提供者？

Angular 2 中的提供者用於創(chuàng)建和向應(yīng)用程序部分提供服務(wù)。要使用提供者，您首先需要將其與 Angular 模塊註冊(cè)。註冊(cè)後，可以將提供者註入到組件、其他服務(wù)甚至其他提供者中。

如何在 Angular 2 中創(chuàng)建服務(wù)？

在 Angular 2 中創(chuàng)建服務(wù)涉及定義一個(gè)類，該類封裝了服務(wù)提供的數(shù)和函數(shù)。然後，此類將使用 @Injectable 裝飾器進(jìn)行裝飾，該裝飾器告訴 Angular 該類是一個(gè)服務(wù)，可以注入到應(yīng)用程序的其他部分。

如何在 Angular 2 中使用值？

Angular 2 中的值用於向應(yīng)用程序的其他部分提供配置信息。要使用值，您首先需要將其與 Angular 模塊註冊(cè)。註冊(cè)後，可以將值注入到控制器、服務(wù)和工廠中。

以上是Angular 2組件和提供商：類，工廠和價(jià)值觀的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！