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

　　　在上一篇博文《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的最大好处就在于提示,其次就是纠错.
　　

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

　　后续,咱们已经考虑到了视图的重用,那么对于数据接口也是能够重用的,而且每每咱们的数据都不是写死的,因此咱们更应该将咱们的数据接口给抽离出来,下一次,咱们分享用户数据接口的抽离.