初探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的最大好处就在于提示,其次就是纠错.

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

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