【熵增教育】初探Angular6.x---进入用户编辑模块——熵增学院

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