Angular2開發組件步奏詳解

這次帶給大家Angular2開發組件步奏詳解，Angular2開發組件的注意事項有哪些，下面就是實戰案例，一起來看一下。

先簡單講講從ng1到ng2框架下組件的職責與地位：

ng1中的一大特色――指令，分為屬性型、標籤型、css類型和註解型。 其中寫在css類別以及註解中的元件想必多數人都不會去使用，而屬性型指令與標籤型指令則是ng1火遍宇宙的功臣之一。在ng2中，標籤型指令乾脆被分離出來，追隨vue等新興勢力的風格升級並稱為組件，並用來處理所有與視圖（DOM）打交道的事情，包括展示數據與動畫。而屬性型指令則用於完善元件的功能，例如接收使用者輸入、回應使用者點擊等事件。其實ng2中內嵌的許多功能都是屬性型指令――ngFor、ngIf等等，而對於元件來說比較依賴具體的項目，所以跟適合基於項目來使用元件寫出一個個使用者看得見的介面來。同時元件也需要與路由打交道，前端路由可以看成是動態更改DOM，在ng2路由中製定好規則後，其實就是在動態渲染或銷毀不同的元件，以此實現前端頁面的切換。

然後講講筆者前面的項目時如何使用ng2組件搭起一個網站的：

1. 照著官方的做法，每個應用得有一個根組件。

2. 區分前端路由，每個路由條目指向一個元件，每個元件各自渲染一個頁面。

3. 專案擴大，單模組無法滿足業務分類，所以先由根路由引導懶加載各個子模組，然後由子模組的子路由各自指向具體的子元件，並渲染各自的頁面。

4. 著眼於單一子元件渲染的單一頁面，其實可以將一些可重複使用的標籤區塊封裝到一個新的元件裡（例如需要ngFor遍歷的複雜資料項目）。

5. 發現其實有一些元件（例如側邊按鈕或訊息模態框）其實整個專案都可能使用到，得把這些封裝成全域共享的元件。

到現在自己都覺得有一點亂，究其原因，應該是組件這個名稱的問題，因為在ng2框架下，大到路由頁面小到資料條目全都用的元件，聲明方式全都一個模樣，難免會亂。

沒辦法只能自己來給元件繼續細分類別了，筆者於是把ng2的元件分成了四類：

頁面元件

• #與路由打交道，只關心匹配路由規則渲染介面，此類元件在宣告時不需要selector 參數（只由路由定位不需要特定標籤）

• 接收路由參數或resolve數據，盡量不做其他業務互動的請求，且不設Input、Output變數

佈局元件

• 用於細分頁面的模組若頁面較簡單可以省去直接使用單位元件，必須有具體的selector參數因為要在頁面元件中使用

• #不負責獲取路由或resolve數據，且盡量不請求數據而透過Input傳入數據或Output響應事件，所有業務交互請求盡量在佈局組件中完成（不至於像放在頁面組件中那麼亂，且各佈局元件可以做到互不影響）

單位元件

• 必須有自己的selector ，一般在自己模組中可重複使用，透過各種屬性型指令修飾自身

• 用於簡化單位層級的重複標籤，例如取得的清單資料中的每個資料項目的介面展示就可以封裝成一個單位元件

• 只負責透過Input傳入資料並顯示，以及透過Output回應事件到外層的佈局元件或頁面元件中處理

共享元件

• 必須有selector，整個專案都共享的元件，實現比較自由，重在減少整個專案的重複程式碼並方便維護

• 比較適合的例如訊息彈框，載入進度條等

• 大部分的屬性型指令，其實功能一般都比較通用，可以與共享元件等同對待，只不過共享元件擁有具體視圖而共享指令只用於實現通用功能

講來講去其實這裡面完全沒有技術難點，只是在暗示一件事――專案目錄安排很重要。

ng2可不認識筆者給它細分的這麼多類型的組件，這些分類是給自己看的，具體的體現就是以這個分類體係得出的一個項目目錄結構 。

筆者為資料夾命名前面有的加上了加號有的加上了減號，​​也算是自己的一種看似奇怪的目錄結構安排了。

解釋一下就是：最外​​層這個term代表整個懶加載模組的目錄，裡面加號的目錄下的組件代表是頁面組件，什麼符號都沒有的代表是佈局組件，帶減號的目錄下的組件代表是單位組件，單位組件可能在整個懶加載模組中都使用到，所以直接在懶加載目錄的最外層，而佈局組件都在具體的頁面組件同級目錄下。

總結就是拋開ES6與TypeScript的外表後ng2組件的使用在技術上難點不算多，本文純粹是一點拙劣的經驗之談，當然筆者目前的經驗還遠遠不足，希望在日後的開發以致研究透徹ng2源碼後能有更深的見解。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

js實作圖片勻速淡入淡出

在JS怎麼實作數字與字串相互轉換

以上是Angular2開發組件步奏詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！