CK's Notepad

Angular 除了常見的 TypeScript 版本，其實還又另外一個 Dart 語言的版本，雖然是不同的團隊維護，但是基本概念是一樣的，因為最近開始在碰 Flutter，當然也要來玩一下 Angular Dart 了。

Angular 的 ngClass 可以讓我們用 Object 的方式來動態設定 css class，其實我們還可以使用另外一種方式來控制 ngClass

我們知道 Angular 的系統是透過 Component 的方式堆疊起來的，而 Component 與 Component 的溝通方式有幾種，1. 透過 @Input 和 @Output ，2. 透過 service 的方式，或是 3. 直接將上層 Component 注入到目前的 Component 內使用。

但通常我是不建議使用第 3 種方式，可是，在某些情境下，還是得必須這樣子處理，而且還需要動態的取得上層的 Component，這篇文章就是分享如何取得上層 Component

RxJS 裡面有許多 Operators 或是建立 Observable 的方法，而這篇文章就是要介紹 using 這一個建立 Observable 的方法

今天在 medium 上面看到一篇有趣的文章，他的主題是 How to detect a sequence of keystrokes in JavaScript，那讓我用 RxJS 來挑戰一下，順便回味一下以前打電動需要輸入一系列的指令才可以開啟密技的樂趣

昨天在討論區上面有人問了一個問題，「Angular 要如何做到檢查使用是否有在活動，如果一定時間內都沒有任何動作時，要自動登出系統」，這一個需求最直覺的方式是定時去檢查最後一次使用者有動作的時間，但使用 setInterval 會讓 Angular 的效能變差，這時候要怎麼解呢?

來談談 ControlContainer 的用法，根據 API 文件解釋

A base class for directives that contain multiple registered instances of NgControl. Only used by the forms module.

而內建繼承使用的 class 有

• AbstractFormGroupDirective
• NgModelGroup
• FormGroupName
• NgForm
• FormGroupDirective
• FormArrayName

我們又可以如何利用 ControlContainer 呢

Angular 在測試非同步的程式碼，有提供 fakeAsync 與 tick 的方法，可以讓我們手動控制時間的快慢，進而做到程式碼的測試，可是，這個寫法遇到 RxJS 時間相關的 operators 就會出問題，那又該如何處理呢?

NgModel 如果沒寫好，很容易出現 ExpressionChangedAfterItHasBeenCheckedError 的錯誤訊息，但這一個錯誤訊息可能也不是 NgModel 直接造成的。只好又將 source code 翻出來看了

Angular 7 版以後 (7.1~7.2)，在 Router 的部份又新增了不少功能，一起來看看到底新增了那些功能吧