本文最初發佈於 indepth.dev 網站，經原作者授權由 InfoQ 中文站翻譯並分享。
今年 6 月，我和 Waterplea 接受了一個有趣的挑戰：每天在 Twitter 上寫一個 Angular 技巧。Angular 社區對此表示熱烈歡迎。
我決定寫一篇社區最喜愛的 10 個技巧的總結，並詳細解釋它們的概念。
讓全局對象令牌化
最受歡迎的推文是關於全局對象的 DI 令牌。
在前端，我們習慣使用很多在任何作用域內都可用的全局對象。我們使用諸如 window、document、fetch 方法和 location 等對象。我們希望能一直見到它們。
但比如說，在 Angular Universal 或 Jest 測試環境中沒有瀏覽器，沒有 Window，也沒有 DOM，那該怎麼辦呢。通過將全局對象作爲令牌（token），你可以放心地使用、替換和測試代碼。
如果你想了解更多有關令牌的信息，並加深對 Angular 依賴注入機制的瞭解，請查看我在 angular.institute 上關於 DI 的免費章節。
擴展 Observable 或 Subject
我看到許多開發人員在他們的應用中創建了出色的服務。因爲我們使用 RxJS，所以服務可以在其中包含一個 Observable 或 Subject 並對其進行一些數據轉換。
你可以簡化這類情況，從 Observable 或 Subject 擴展服務：
控件值爲 ReplaySubject
在某些情況下，你需要訂閱控件 valueChanges 並獲取其當前值。不要重新發明輪子，只需這樣做即可：
高 DPI 用戶
你知道如何分辨使用高 DPI 屏幕的用戶嗎？
你可以這樣做檢查，並用原生媒體標籤使你的應用更適合高 DPI 屏幕：
不要忘記管道！
管道 Angular 是非常強大的選項。它使我們能夠遵循組件模板內部的聲明性方法。令我有些難過的是，一些 Angular 開發人員不喜歡創建自己的管道，可其實你幾乎可以在任何數據轉換的場景中創建管道。
這是適用於許多情況的通用管道示例：
Banana in a box
它有很多名字：banana in a box、雙向綁定、輸入 - 輸出，並且使用起來很方便，比如和 ngModel 配合就很好用。但是如何爲你自己的組件實現它呢？
RxJS 是一個未開發的世界
使用 RxJS 時，我嘗試檢查 RxJS 運算符的所有參數和重載，原因是有許多隱藏的選項可以使你更快地編寫更強大的流。
還有許多運算符不是很流行，但是可以用一行代碼來解決你的特定問題。
我就發現了一個例子：
還有一條關於 RxJS 的推文，是讓你的組件更具可擴展性的小技巧。
另一個：可以幫助編寫具有很好功能的微型.pipe 的運算符。
你甚至可以製作自己的 ngFor 替代品
最後一個：Angular 對於 for…of… 之類的指令有特殊的語法。這樣，你可以創建自己的 ngFor。
例如，它可以是用於迭代映射的 ngFor。或一個簡單的從一個數字迭代到另一個數字的 for：
