多组件化开发

    • 通过缩减 UsersComponent 的职责简化了该组件。
    • 可以把 UserDetailComponent 改进成一个功能丰富的用户编辑器，而不用改动父组件 UsersComponent。
    • 可以改进 UsersComponent，而不用改动用户详情视图。
    • 可以在其它组件的模板中重复使用 UserDetailComponent。

    与 UsersComponent 的创建方式类似，我们使用 Angular CLI 创建一个名为 user-detail 的新组件。

    CLI 创建了一个新的文件夹 src/app/user-detail/，并生成了 UserDetailComponent 的相关的四个文件。

    2. CREATE src/app/user-detail/user-detail.component.html (30 bytes)
    3. CREATE src/app/user-detail/user-detail.component.spec.ts (657 bytes)
    4. CREATE src/app/user-detail/user-detail.component.ts (288 bytes)
    5. CREATE src/app/user-detail/user-detail.component.css (0 bytes)

    从 UsersComponent 模板的底部把表示用户详情的 HTML 代码剪切粘贴到所生成的 UserDetailComponent 模板中。

    所粘贴的 HTML 引用了 selectedUser。 新的 UserDetailComponent 可以展示任意用户，而不仅仅所选的。因此还要把模板中的所有 selectedUser 替换为 user。

    完工之后，UserDetailComponent 的模板应该是这样的：

    1. <div *ngIf="user">
    2.   <h2>{{user.name}}</h2>
    3.   <div><span>id: </span>{{user.id}}</div>
    4.   <div>
    5.   <label>name:
    6.       <input [(ngModel)]="user.name" placeholder="name">
    7.   </label>
    9. </div>

    打开 UserDetailComponent 类文件 user-detail.component.ts ，并导入 User 符号。

    user 属性必须是一个带有 @Input() 装饰器的输入属性，因为外部的 UsersComponent 组件将会绑定到它。就像这样：

    1. <app-user-detail [user]="selectedUser"></app-user-detail>

    修改 @angular/core 的导入语句，导入 Input 符号。

    1. import { Component, OnInit, Input } from '@angular/core';

    添加一个带有 @Input() 装饰器的 user 属性。

    完整代码如下：

    1. import { Component, OnInit, Input } from '@angular/core';
    3. import { User } from '../user';
    4. @Component({
    5.   selector: 'app-user-detail',
    6.   templateUrl: './user-detail.component.html',
    7.   styleUrls: ['./user-detail.component.css']
    9. export class UserDetailComponent implements OnInit {
    11.   @Input() user: User;
    13.   constructor() { }
    15.   ngOnInit() {
    16.   }

    把 UsersComponent.selectedUser 绑定到该元素的 user 属性，就像这样：

    1. <app-user-detail [user]="selectedUser"></app-user-detail>

    其中， 是 Angular 的属性绑定语法。

    这是一种单向数据绑定。从 UsersComponent 的 selectedUser 属性绑定到目标元素的 user 属性，并映射到了 UserDetailComponent 的 user 属性。

    现在，当用户在列表中点击某个用户时，selectedUser 就改变了。 当 selectedUser 改变时，属性绑定会修改 UserDetailComponent 的 user属性，UserDetailComponent 就会显示这个新的用户信息。

    修改后的 UsersComponent 的模板 users.component.html 是这样的：