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