作者 | Roman Sedov
譯者 | 王強
策劃 | 小智
本文最初釋出于 indepth.dev 網站，經原作者授權由 InfoQ 中文站翻譯并分享。
今年 6 月，我和 Waterplea 接受了一個有趣的挑戰：每天在 Twitter 上寫一個 Angular 技巧。Angular 社群對此表示熱烈歡迎。
我決定寫一篇社群最喜愛的 10 個技巧的總結，并詳細解釋它們的概念。
讓全局對象令牌化
最受歡迎的推文是關于全局對象的 DI 令牌。
在前端，我們習慣使用很多在任何作用域内都可用的全局對象。我們使用諸如 window、document、fetch 方法和 location 等對象。我們希望能一直見到它們。
但比如說，在 Angular Universal 或 Jest 測試環境中沒有浏覽器，沒有 Window，也沒有 DOM，那該怎麼辦呢。通過将全局對象作為令牌（token），你可以放心地使用、替換和測試代碼。
https://twitter.com/marsibarsi/status/1274662852079517697?s=20
如果你想了解更多有關令牌的資訊，并加深對 Angular 依賴注入機制的了解，請檢視我在 angular.institute 上關于 DI 的免費章節：
https://angular.institute/
擴充 Observable 或 Subject
我看到許多開發人員在他們的應用中建立了出色的服務。因為我們使用 RxJS，是以服務可以在其中包含一個 Observable 或 Subject 并對其進行一些資料轉換。
你可以簡化這類情況，從 Observable 或 Subject 擴充服務：
https://twitter.com/marsibarsi/status/1274244090285170689?s=20
控件值為 ReplaySubject
在某些情況下，你需要訂閱控件 valueChanges 并擷取其目前值。不要重新發明輪子，隻需這樣做即可：
https://twitter.com/marsibarsi/status/1269201441756979200?s=20
擴充 Observable 或 Subject
你知道如何分辨使用高 DPI 螢幕的使用者嗎？
你可以這樣做檢查，并用原生媒體标簽使你的應用更适合高 DPI 螢幕：
https://twitter.com/marsibarsi/status/1273193230901956608?s=20
不要忘記管道！
管道 Angular 是非常強大的選項。它使我們能夠遵循元件模闆内部的聲明性方法。令我有些難過的是，一些 Angular 開發人員不喜歡建立自己的管道，可其實你幾乎可以在任何資料轉換的場景中建立管道。
這是适用于許多情況的通用管道示例：
https://twitter.com/marsibarsi/status/1270650741275987970?s=20
Banana in a box
它有很多名字：banana in a box、雙向綁定、輸入 - 輸出，并且使用起來很友善，比如和 ngModel 配合就很好用。但是如何為你自己的元件實作它呢？
https://twitter.com/marsibarsi/status/1283676458775392256?s=20
RxJS 是一個未開發的世界
使用 RxJS 時，我嘗試檢查 RxJS 運算符的所有參數和重載，原因是有許多隐藏的選項可以使你更快地編寫更強大的流。
還有許多運算符不是很流行，但是可以用一行代碼來解決你的特定問題。
我就發現了一個例子：
https://twitter.com/marsibarsi/status/1276804788982693888?s=20
還有一條關于 RxJS 的推文，是讓你的元件更具可擴充性的小技巧。
https://twitter.com/marsibarsi/status/1277915827526868993?s=20
另一個：可以幫助編寫具有很好功能的微型.pipe 的運算符。
https://twitter.com/marsibarsi/status/1277568971202584576?s=20
你甚至可以制作自己的 ngFor 替代品
最後一個：Angular 對于 for...of... 之類的指令有特殊的文法。這樣，你可以建立自己的 ngFor。
例如，它可以是用于疊代映射的 ngFor。或一個簡單的從一個數字疊代到另一個數字的 for：
https://twitter.com/marsibarsi/status/1270282771458555906?s=20
小 結
Angular 是一個很大的主題，能說的東西還有很多。我有很多關于新技巧的想法，準備與社群分享我的最佳實踐。是以，如果你對這樣的推文感興趣，請在 Twitter 上關注我（https://twitter.com/marsibarsi），程式設計愉快！
參考閱讀：
https://indepth.dev/best-angular-tips/