input()
父组件:初始化用户列表
@Component({
selector: 'parent-component',
template: '<div>
<child-component [users]="users"></child-component>
</div>'
})
export class ParentComponent implements OnInit{
let users : List<User> = null;
ngOnInit() {
users.push(new User('A', 'A', 'A@gmail.com');
users.push(new User('B', 'B', 'B@gmail.com');
users.push(new User('C', 'C', 'C@gmail.com');
}
}
子组件使用 Input()
从父组件获取用户
@Component({
selector: 'child-component',
template: '<div>
<table *ngIf="users !== null">
<thead>
<th>Name</th>
<th>FName</th>
<th>Email</th>
</thead>
<tbody>
<tr *ngFor="let user of users">
<td>{{user.name}}</td>
<td>{{user.fname}}</td>
<td>{{user.email}}</td>
</tr>
</tbody>
</table>
</div>',
})
export class ChildComponent {
@Input() users : List<User> = null;
}
export class User {
name : string;
fname : string;
email : string;
constructor(_name : string, _fname : string, _email : string){
this.name = _name;
this.fname = _fname;
this.email = _email;
}
}