下载掌阅APP，畅读海量书库
立即打开
本节要把原来的UsersComponent组件重构为UsersComponent和UserDetailComponent两个组件。多组件化开发方式具有以下优势：
● 简化了UsersComponent组件。
● 可以把UserDetailComponent组件改进成一个功能丰富的用户编辑器，而不用改动父组件 UsersComponent。
● 可以改进UsersComponent组件，而不用改动用户详情视图。
● 可以在其他组件的模板中重复使用UserDetailComponent组件。
与UsersComponent组件的创建方式类似，我们使用Angular CLI创建一个名为“user-detail”的新组件。
Angular CLI创建了一个新的文件夹 src/app/user-detail/，并生成了与UserDetailComponent组件相关的4个文件。
从UsersComponent模板的底部把表示用户详情的HTML代码剪切、粘贴到所生成的 UserDetailComponent模板中。
所粘贴的HTML代码引用了selectedUser。新的UserDetailComponent可以展示任意用户，而不仅仅是所选的。因此，还要把模板中的所有selectedUser替换为user。
完成之后，UserDetailComponent模板应该是如下这样的：
UserDetailComponent模板中绑定了组件中的user属性，它的类型是User。打开UserDetailComponent类文件user-detail.component.ts，并导入User类。
user属性必须是一个带有@Input()装饰器的输入属性，因为外部的UsersComponent组件将会绑定到它。就像这样：
修改@angular/core 的导入语句，导入Input符号。
添加一个带有@Input()装饰器的user属性。
完整代码如下。
代码 4-14 app/user-detail/user-detail.component.ts
UserDetailComponent 的选择器是＇app-user-detail＇。把＜app-user-detail＞添加到 UsersComponent组件的模板文件users.component.html的底部，以便把用户详情视图显示到那里。
把UsersComponent.selectedUser绑定到该元素的user属性上，就像这样：
其中，[user]=〝selectedUser〝是Angular的属性绑定语法。
这是一种单向数据绑定。从UsersComponent组件的selectedUser属性绑定到目标元素的user属性，并映射到UserDetailComponent的user属性。
现在，当用户在列表中单击某个用户时，selectedUser就改变了。当selectedUser改变时，属性绑定会修改UserDetailComponent的user属性，UserDetailComponent 就会显示这个新的用户信息。
修改后的UsersComponent组件的模板文件users.component.html是如下这样的。
代码 4-15 app/users/users.component.html
执行“ng serve”命令以启动应用，效果和图4-12一样，因为功能本身没有编码，只是在代码上做了逻辑拆分，不影响最终的运行效果。