初探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,或者留言給我.