我們知道 Angular 的系統是透過 Component 的方式堆疊起來的，而 Component 與 Component 的溝通方式有幾種，1. 透過 @Input 和 @Output ，2. 透過 service 的方式，或是 3. 直接將上層 Component 注入到目前的 Component 內使用。
但通常我是不建議使用第 3 種方式，可是，在某些情境下，還是得必須這樣子處理，而且還需要動態的取得上層的 Component，這篇文章就是分享如何取得上層 Component
今天在 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 有
AbstractFormGroupDirectiveNgModelGroupFormGroupNameNgFormFormGroupDirectiveFormArrayName我們又可以如何利用 ControlContainer 呢
Angular 在測試非同步的程式碼，有提供 fakeAsync 與 tick 的方法，可以讓我們手動控制時間的快慢，進而做到程式碼的測試，可是，這個寫法遇到 RxJS 時間相關的 operators 就會出問題，那又該如何處理呢?
NgModel 如果沒寫好，很容易出現 ExpressionChangedAfterItHasBeenCheckedError 的錯誤訊息，但這一個錯誤訊息可能也不是 NgModel 直接造成的。只好又將 source code 翻出來看了
PrimeNG 元件很豐富沒錯，但是他所提供的原件在寫 E2E 測試時卻是一個讓人無法忍受的痛苦，主要原因是他為了畫面的呈現，使用各種非正統的方式呈現畫面，而 Dropdown 元件就是一個很標準的案例
其實 Angular Playground 出來已經有好一段時間了，但是之前的環境設定會讓人懶得用。現在可以簡單的透過 ng add angular-playground 的方式完成整體的環境設定，這麼方便不用就說不過去了。