初探Angular6.x---主从组件

FingerLiu 发布于2019-08-19 11:06 / 2903人阅读

摘要：在上一篇博文用户列表与详情展示中我们用实现了用户列表的展示并通过语法实现了列表单击时将单击的对象传到后台的功能最后为了防止初次加载对象为空导致的错误我们又使用了语法来对要展示的详情对象进行判空操作但随着后续模块的增多以及业务的交叉我们

　　　在上一篇博文《Angular6.x---用户列表与详情展示》中,我们用ngFor=”let object of list”实现了用户列表的展示,并通过(click)=”onSelect(obj)”语法实现了列表单击时将单击的对象传到后台的功能,最后为了防止初次加载对象为空导致的错误,我们又使用了ngIf语法来对要展示的详情对象进行判空操作.但随着后续模块的增多,以及业务的交叉,我们发现这样的代码组织形式不利于复用,并且当我们修改用户详情的时候,可能还会导致列表出现错误,所以我们今天来说明一下在angular6.x中,如何将详情与列表展示分开.
　　
　　在前几次分享中,因为代码比较简单,量也不多,所以我们使用命令行和vi进行编辑,从这次开始,我们使用vs code来编写我们的代码,此处略过vs code的安装过程.
　　
　　第一步,我们使用 ng generate component user-detail命令来生成一个详情模块.在vs code 中我们用Ctrl+Shift+P 打开命令窗口,选ng generate,之后选component,最后输入我们组建的名称user-detail
　　

　　我们现在将我们用户详情信息转移到user-detail目录下的user-detail.component.html里(左图),并且在user-detail.component.ts里声明user的属性(右图),这里有点小小的改动,就是将原来的selectUser改为了userVO,以便于之后用户详情模块的复用.并且因为再这个模块里,所要展示的用户是从外面传过来的,所以我们要给userVO这个属性加上@Input()这个修饰符.
　　

　　详情模块我们已经准备好了,我们现在在列表页引入我们的详情模块,并注入userVO对象.首先是引入app-user-detail标签,并在提示中选userVO,最终效果如右图所示,给组件注入对象,我们使用的是[对象名]=”对象”,这样的语法格式,使用ide的最大好处就在于提示,其次就是纠错.
　　

　　和上次一样,我们仍然以最后的运行结果来结束我们本次的分享.
　　

　　后续,我们已经考虑到了视图的重用,那么对于数据接口也是可以重用的,并且往往我们的数据都不是写死的,所以我们更应该将我们的数据接口给抽离出来,下一次,我们分享用户数据接口的抽离.

私有云 GPU服务器初探webrtc webrtc技术初探初探腾讯云存储网关 SQL存储过程初探

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/76990.html

初探Angular6.x---用户列表与用户详情

摘要：初探用户列表与用户详情在上一篇博文进入用户编辑中我们分享了属性名称和这两个表达式的运用我们已经可以将表单里的修改与我们展示出来的值进行同步今天我们来学习在中如何展示一个列表在项目里列表展示可以说是非常普遍的一个需求了几乎有展示数　　初探Angular6.x---用户列表与用户详情　　在上一篇博文《Angular6.x---进入用户编辑》中,我们分享了{{属性名称}}和[(ngMod...

helloworldcoding 2019-08-19 10:59 评论0 收藏0
angular6.x中ngTemplateOutlet指令的使用

摘要：在使用进行开发的时候通过属性绑定向组件内部传值的方式有时候并不能完全满足需求比如我们写了一个公共组件但是某个模板使用这个公共组件的时候需要在其内部添加一些标签内容这种情况下除了使用预先在组件内部定义之外就可以利用指令向组件传入内容指令类似于在使用angular进行开发的时候,通过属性绑定向组件内部传值的方式,有时候并不能完全满足需求,比如我们写了一个公共组件,但是某个模板使用这个公共...

suxier 2019-08-23 10:52 评论0 收藏0
【Angular】Angula6中的组件通信

摘要：组件通信本文主要介绍中的组件通信一父子组件通信父组件向子组件传递信息方法一在父组件上设置子组件的属性父组件绑定信息可设置子组件标题子组件接收消息方法二父组件调用子组件的方法父组件触发消息子组件接收消息来自子组件的打印子组件向父组件传 Angula6_组件通信本文主要介绍 Angular6 中的组件通信 showImg(https://segmentfault.com/img/remo...

voyagelab 2019-08-23 15:05 评论0 收藏0
angular(angular6/angular7/angular8) delete请求body的问

摘要：中请求，不接受，只需将其放在对象中即可在，，及以上版本中修改如下在中修改如下这样请求就可以携带 angular中httpclient delete请求，不接受body，只需将其放在options对象中即可在 angular6.x ，angular7.x， angular8.x及以上版本中修改如下: const options = { headers: new HttpHeader...

gggggggbong 2019-08-26 10:49 评论0 收藏0
angular6根据environments配置文件更改开发所需要的环境

摘要：前端开发过程中，我们常常需要根据需求去运行或者打包不同环境的代码，幸运的是，给我们提供了配置，但是的配置方式和的其他版本的配置方式是有所不同的，下面我就分别介绍在测试预生产环境下实现配置。前端开发过程中，我们常常需要根据需求去运行或者打包不同环境的代码，幸运的是，angular给我们提供了environments配置，但是angular6.x的配置方式和angular的其他版本的配置...

seasonley 2019-08-23 15:39 评论0 收藏0