Lawrence Blog

開發Angular應用程式的時候，有時候會把一些常用 複合式控制元件 打包成一個Component控制項，只要將商業邏輯撰寫在該控制項之後，其它開發人員若需要使用到該功能，就可以直接拿來使用了，例如下圖，是一個動態選擇電子郵件的輸入框，當資料輸入後會去檢查電子郵件的資料，並撈回可用的電子郵件。 在開發表單或者使用ngModel雙向繫結的時候，當部分控制項拉出去變成一個Component的時候，若要取得該控制項的資料，直覺的解決辦法就是使用 @Input() 和 @Output 的方式進行資料的傳遞。 但 Angular 本身就有針對 ngModel 在 Component 的資料繫結提供解決辦法，在Component 端實作 ControlValueAccessor，接下來的就來分享一下該怎麼實作該功能。

Angular 的指令共分三種類型 : 組件(Component) : 也就是模板的指令，這是最常使用到的指令。 結構型指令(Structural directives) : 用來修改視圖的 "結構"，例如添加或移除DOM布局，常用的指令如 NgIf 和 NgFor。 屬性指令(Attribute directives) : 用來改變視圖元件的 "外觀和行為"，例如預設的背景色、滑過改變顏色，常用的指令如 NgStyle。 而 @Directive() 就是 "屬性指令" 的一種，下圖為本文範例的示意圖，先大概說明以下幾個操作情境，底下會有詳細的說明。 設定載入時的預設背景色。 設定滑鼠滑過的背景設，當滑鼠離開後恢復預設背景色。 設定滑鼠點擊的背景設，當Click事件發生時變成指定背景色。

SPA(Single Page Application)的開發方式就是指透過一個 html 檔案來達成整個網站系統的任何操作，從頭到尾都不會離開此頁面，例如 Web Gmail 就是一個典型的 SPA 設計，回過頭來看一下 Angular 的基礎示範教學中也是使用 SPA 的方式，並透過屬性的判斷來決定使否載入某個 Template。 小型應用程式只有少數幾個頁面，使用此方式到還好，但假想一下有一個中大型應用程式有數十甚至數百個頁面需要切換，如果再像小型應用程式一樣透過屬性判斷的方式，後續整個程式碼可能會出現難以維護的情況，因此這種時候就需要運用 Angular 所提供的路由機制來處理此類的問題了。 什麼是路由? 簡單來說就是 Angular 會根據瀏覽器中的 URL，自動對應到要載入的視圖，這跟其它開發語言的路由，如 ASP.NET MVC 的概念是差不多的，差別在 Angular 透過路由機制來完成單一個網頁檔案切換視圖(SPA)的效果。 Angular 路由器是一個可選擇的外部 Angular NgModule，名叫RouterModule。 路由器包含了多種服務(RouterModule)、多種指令(RouterOutlet、RouterLink、RouterLinkActive)、 和一套配置(Routes)，本文將說明如何建立 Angular 路由設定。

在前面的學習過程中，理解了Angular的Layout布局方式可以像是ASP.NET的MasterPage方式來規劃好UI的布局，使用的是Template內嵌另外一個子Template，如下圖紅框處就是一個Child的Template，也學習到 Parent & Child Template 之間資料的傳遞方式( 參考先前文章 )。 今天又再次接觸到幾個新的裝飾器 @ViewChild & @ContentChild，在開始說明之前，需要先理解<ng-content>這個嵌入標籤。 先回到UI布局的部分，如果想要在一個 Parent 下方放置另外一個 Child Template，最簡單的使用方式就是直接在要顯示的地方加上類似上圖的操作方法。 從上面的範例來看，該標籤的InnerHtml是空白的，因此就大膽的假設有機會把資料寫在InnerHtml的部分，讓HTML標籤可以從 Parent Template 傳入Child Template當中，但經過實際測試的結果(如下圖)，果然失敗了。 實際上Angular是允許讓HTML標籤由Parent Template傳入Child Template，ng-content就是要用來處理此問題的。

Angular可以透過在HTML標籤內使用 DOM的Property綁定 的方式將資料由Component端傳送到Template端(又或者反向綁定、雙向綁定)。 但該方式指的都是同一個Template，若假設有一種情境為，一個父親的Template必須要將值傳送到兒子Template，並且兒子Template內處理完某些事件必須要將資料傳送回父親Template的情境時，該如何進行? PS. 有點類似早期的showModalDialog在兩個父子視窗傳值的概念，只是在此Single Page Application（SPA）的情境中不是兩個不同的頁面，因此使用方式也有所不同。