在上一篇博文《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-detailbr/> ![](https://s1.51cto.com/images/blog/201809/05/917172460010eb304bfe8bdb7de24b21.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)![](https://s1.51cto.com/images/blog/201809/05/5a86c51f01ab9489749384375cf42657.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)
我们现在将我们用户详情信息转移到user-detail目录下的user-detail.component.html里(左图),并且在user-detail.component.ts里声明user的属性(右图),这里有点小小的改动,就是将原来的selectUser改为了userVO,以便于之后用户详情模块的复用.并且因为再这个模块里,所要展示的用户是从外面传过来的,所以我们要给userVO这个属性加上@Input()这个修饰符.
详情模块我们已经准备好了,我们现在在列表页引入我们的详情模块,并注入userVO对象.首先是引入app-user-detail标签,并在提示中选userVO,最终效果如右图所示,给组件注入对象,我们使用的是[对象名]=”对象”,这样的语法格式,使用ide的最大好处就在于提示,其次就是纠错.
和上次一样,我们仍然以最后的运行结果来结束我们本次的分享.
后续,我们已经考虑到了视图的重用,那么对于数据接口也是可以重用的,并且往往我们的数据都不是写死的,所以我们更应该将我们的数据接口给抽离出来,下一次,我们分享用户数据接口的抽离.
初探Angular6.x---主从组件
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
Java项目面试实操 提升大厂面试成功率
wy53780
2020-04-23 14:14:04
玩转算法系列--图论精讲 面试升职必备(Java版)
wy53780
2020-04-23 14:03:23
玩转Java并发工具,精通JUC,成为并发多面手
wy53780
2020-04-23 13:56:08
线程八大核心+Java并发底层原理精讲(Java并发核心知识体系精讲)
wy53780
2020-04-23 13:55:55
Java通用型支付+电商平台双系统实战
wy53780
2020-04-23 13:54:42
【跃迁之路】【734天】程序员高效学习方法论探索系列(实验阶段491-2019.2.24)
Wall_Breaker
2019-02-24 23:25:10
Java是怎么运行的?
勤思
2019-02-24 22:52:36
sql语法、关系建模
死瘦宅
2019-02-24 22:35:22
MySQL 事务、函数、触发器、数据库备份、权限管理
死瘦宅
2019-02-24 22:35:12
Python与家国天下
豌豆花下貓
2019-02-24 22:22:40
Java面试 | 002
Java貓說
2019-02-24 21:05:12
《从0到1学习Flink》—— Flink 读取 Kafka 数据批量写入到 MySQL
zhisheng
2019-02-24 21:04:11
Redis | 001能做什么?
Java貓說
2019-02-24 21:03:51
java中具有继承关系的类及其对象初始化顺序
Linus脫襪子
2019-02-24 19:55:05