初探Angular6.x---進入用戶編輯模塊
在上一篇博文《Angular6.x---基本目錄說明》中,我們簡單給大家介紹了Angular項目創建成功後,裏面所包含的各個目錄的含義,着重講了src下面的各個目錄和文件,從今天起,我們開始進入項目實戰階段.
在項目實戰階段結束後,我們會完成一個故障管理系統,這個系統主要包含權限管理(RBAC),產品管理,產品類型管理,產品故障管理,產品故障解決及記錄等功能.
我們先從用戶管理開始入手.與AngularJS1.x不同,Angular6.x幫我們做了許多事情.在AngularJS中,我們可能需要自己手動去引入js,手動去創建文件等等,而Angular6.x呢,我們只需要運行ng generate component users 就可以給我們在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這個文件中引入添加如下兩行代碼,如下圖所標註的:
然後我們就可以執行ng serve –-open來看我們最終的效果了,我們今天的內容就用我們最終的效果圖做結束,如果你按着這篇博文所述編碼碰到了什麼問題,請Q我3474203856,或者留言給我們.