Categories
程式開發

最受歡迎的10大Angular技巧


本文最初發佈於indepth.dev 網站,經原作者授權由InfoQ 中文站翻譯並分享。

今年6 月,我和Waterplea 接受了一個有趣的挑戰:每天在Twitter 上寫一個Angular 技巧。 Angular 社區對此表示熱烈歡迎。

我決定寫一篇社區最喜愛的10 個技巧的總結,並詳細解釋它們的概念。

讓全局對象令牌化

最受歡迎的推文是關於全局對象的DI 令牌。

在前端,我們習慣使用很多在任何作用域內都可用的全局對象。 我們使用諸如window、document、fetch 方法和location 等對象。 我們希望能一直見到它們。

但比如說,在Angular Universal 或Jest 測試環境中沒有瀏覽器,沒有Window,也沒有DOM,那該怎麼辦呢。 通過將全局對像作為令牌(token),你可以放心地使用、替換和測試代碼。

最受歡迎的10大Angular技巧 1

如果你想了解更多有關令牌的信息,並加深對Angular 依賴注入機制的了解,請查看我在angular.institute 上關於DI 的免費章節

擴展Observable 或Subject

我看到許多開發人員在他們的應用中創建了出色的服務。 因為我們使用RxJS,所以服務可以在其中包含一個Observable 或Subject 並對其進行一些數據轉換。

你可以簡化這類情況,從Observable 或Subject 擴展服務:

最受歡迎的10大Angular技巧 2

控件值為ReplaySubject

在某些情況下,你需要訂閱控件valueChanges 並獲取其當前值。 不要重新發明輪子,只需這樣做即可:

最受歡迎的10大Angular技巧 3

高DPI 用戶

你知道如何分辨使用高DPI 屏幕的用戶嗎?

你可以這樣做檢查,並用原生媒體標籤使你的應用更適合高DPI 屏幕:

最受歡迎的10大Angular技巧 4

不要忘記管道!

管道Angular 是非常強大的選項。 它使我們能夠遵循組件模板內部的聲明性方法。 令我有些難過的是,一些Angular 開發人員不喜歡創建自己的管道,可其實你幾乎可以在任何數據轉換的場景中創建管道。

這是適用於許多情況的通用管道示例:

最受歡迎的10大Angular技巧 5

盒裝香蕉

它有很多名字:banana in a box、雙向綁定、輸入- 輸出,並且使用起來很方便,比如和ngModel 配合就很好用。 但是如何為你自己的組件實現它呢?

最受歡迎的10大Angular技巧 6

RxJS 是一個未開發的世界

使用RxJS 時,我嘗試檢查RxJS 運算符的所有參數和重載,原因是有許多隱藏的選項可以使你更快地編寫更強大的流。

還有許多運算符不是很流行,但是可以用一行代碼來解決你的特定問題。

我就發現了一個例子

最受歡迎的10大Angular技巧 7

還有一條關於RxJS 的猜測,是讓你的組件更具可擴展性的小技巧。

最受歡迎的10大Angular技巧 8

另一個:可以幫助編寫具有很好功能的微型.pipe 的運算符。

最受歡迎的10大Angular技巧 9

你甚至可以製作自己的ngFor 替代品

最後一個:Angular 對於for…of… 之類的指令有特殊的語法。 這樣,你可以創建自己的ngFor。

例如,它可以是用於迭代映射的ngFor。 或一個簡單的從一個數字迭代到另一個數字的for:

最受歡迎的10大Angular技巧 10

最受歡迎的10大Angular技巧 11

英文原版

社區選擇的10個最佳Angular技巧