初探Angular6.x---進入用戶編輯模塊

  

  在上一篇博文《Angular6.x---基本目錄說明》中,咱們簡單給你們介紹了Angular項目建立成功後,裏面所包含的各個目錄的含義,着重講了src下面的各個目錄和文件,從今天起,咱們開始進入項目實戰階段.

  在項目實戰階段結束後,咱們會完成一個故障管理系統,這個系統主要包含權限管理(RBAC),產品管理,產品類型管理,產品故障管理,產品故障解決及記錄等功能.

  咱們先從用戶管理開始入手.與AngularJS1.x不一樣,Angular6.x幫咱們作了許多事情.在AngularJS中,咱們可能須要本身手動去引入js,手動去建立文件等等,而Angular6.x呢,咱們只須要運行nggeneratecomponentusers就能夠給咱們在src/app目錄下自動建立一個users目錄,而後裏面包含了一些基本的文件.以下圖所示:

  這個目錄裏有咱們的樣式文件,頁面模版,測試單元還有咱們的組件.組件裏如今空空如也,咱們能夠根據咱們的須要給咱們的UserComponent定義屬性,好比若是咱們須要在頁面展現用戶詳細信息,咱們就能夠把用戶定義爲一個屬性,左側圖是原始的代碼,而後咱們添加屬性後如右圖所示:

  有了這個屬性,咱們就能夠在users.component.html裏進行展現了,在Angular中展現一個屬性,咱們使用{{屬性名稱}}這樣的表達式,基本的類型咱們能夠直接寫屬性的名稱,但有的時候咱們會想要定義一個內置對象,如上方右圖所示,此時咱們就須要建立一個Users類,與Java相似,建立好後,咱們就能夠在須要使用這個類的組件中進行引用了,如上方右圖所示.import{Users}from‘./users’;表示從當前目錄中引入users.ts,若是咱們要顯示用戶的暱稱,咱們就能夠寫{{user.nickName}}.users.ts代碼以下左圖所示,而此時咱們的Html模版裏的代碼以下右圖所示:

  在右圖中有一個div,裏面放了一個input表單,這個表單的做用是對用戶的暱稱進行編輯,在上文咱們提到{{屬性名稱}}能夠爲咱們的模版綁定一個屬性,並進行展現,這種綁定是雙向的,也就是說當這個屬性值改變的時候,頁面裏的顯示也是會相應改變的,那如何將表單裏的值與{{屬性名稱}}表達式進行綁定呢?在上方的右圖中,咱們在input中使用了[(ngModel)]=」user.nickName」.[(ngModel)]是Angular裏的雙向綁定語法.剛剛那個表達式的意思就是說咱們將用戶的暱稱綁定到當前的input上,綁定成功後,若是咱們表單裏的值改變了,那麼全部使用到nickName的地方都會進行變更.

  最後咱們須要將咱們建立的這個模塊引入到引導頁面中去,即在引導頁面的合適位置加入app-users標籤,以下圖所示:

  在這裏額外提一點,ngModel雖然是Angular的關鍵字,但這個修飾符不會自動引入,咱們在使用以前必須引入,不然就會報錯,咱們運行服務以後,會發現裏面是個空白頁面,而後f12打開控制檯刷新頁面,會發現報錯信息以下圖所示:

  針對這個錯誤,咱們須要app.module.ts這個文件中引入添加以下兩行代碼,以下圖所標註的:

  而後咱們就能夠執行ngserve–-open來看咱們最終的效果了,咱們今天的內容就用咱們最終的效果圖作結束,若是你按着這篇博文所述編碼碰到了什麼問題,Q我3474203856,或者留言給我.