03-a Communicate Between Components Using Dependency Injection

原文: Communicate Between Components Using Dependency Injection

當前的<toggle>組件仍然存在其他的問題，比如：

• 我們無法在其中方式多個<toggle-on>或者是<toggle-button>在同一個<toggle>中
• 如果一個<toggle-on>作為另外一個自定義組件的內容的話，我們無法是使用@ContentChild裝飾器獲取它

目標

我們需要將這兩個問題作為新的目標：

• 我們可以增加多個相同類型的子組件(<toggle-on>、<toggle-off>、<toggle-button>)
• 并且可以使這些子組件放置在任意的自定義容器的視圖模板(views)中

實現

針對第一個問題，我們使用@ContentChildren裝飾器（因為它獲取所有的子組件引用），但是它無法解決第二個問題。

為了同時解決這兩個問題，我們可以使用Angular提供的DI機制(dependency injection mechanism)。你可以將一個組件的祖先組件通過DI機制注入到子組件的構造方法中，這樣你就可以通過祖先組件的引用來訪問它們的方法和屬性。

所以，<toggle-on>、<toggle-off>、<toggle-button>都可以通過DI機制來獲得最相近的<toggle>組件的引用，從而共享它的開關狀態。

Note:
這里也可以使用service來共享狀態，也許還會更便捷，但是我們可以通過DI來達到目的，我們可以在之后的章節（第十二章）來闡述service相關的內容，這部分內容會與React Context Provider的內容對應。

成果

你可以在在線代碼倉庫看到，有兩個<toggle-off>組件如我們預期的那樣被渲染，并且有一個<other-component>組件，其中有<toggle-off>和<toggle-on>兩個組件。

這些子組件都會監聽同一個<toggle>組件的開關狀態。

在線代碼演示（自備梯子）：https://stackblitz.com/edit/a...

譯者注

依賴注入是Angular中提供的很強大的功能，在angularjs中就表現出色并作為賣點。

如果仔細思考的話，我們可以發現，在這一版的實現中，對于<toggle>組件的引用獲取方式，從命令式轉變為了聲明式，因為我們不再關心獲取<toggle>引用的細節（比如具體使用@ContentChild還是@ContentChildren）。

同時，依賴注入機制是依附于組件本身存在的，并不依附于模板的層級關系，因此不會面臨問題二的困擾。

對于木偶組件本身，往往作為消費者存在，這種情況下使用DI機制可能會達到更好的效果。

總結

以上是生活随笔為你收集整理的高级 Angular 组件模式 (3a)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。