在Angular 2 中的组件（一）知道了怎么创建组件，以及怎样使用组件，但是组件渲染的是一个静态的模板，这就比较单调没有趣味了。下面使用组件在浏览器中展示用户名的列表。需要两个组件单个用户组件以及用
在Angular 2 中的组件（一）知道了怎么创建组件，以及怎样使用组件，但是组件渲染的是一个静态的模板，这就比较单调没有趣味了。
下面使用组件在浏览器中展示用户名的列表。需要两个组件单个用户组件以及用户列表组件。
用户组件示例
使用下面命令创建用户组件，命令如下：
ng generate component user-item将<app-user-item></app-user-item>标签添加到app.component.html中。如下：
<h1> {{title}} <app-hello-world></app-hello-world> <app-user-item></app-user-item></h1>然后启动HTTP服务，浏览器访问 http://localhost:4200/确保浏览器中可以看到user-item works!
修改user-item.component.ts文件在UserItemComponent类中添加name属性，以及在构造函数中给name属性赋值，代码如下：
import { Component, OnInit } from '@angular/core';@Component({ selector: 'app-user-item', templateUrl: './user-item.component.html', styleUrls: ['./user-item.component.css']})export class UserItemComponent implements OnInit { name:string;//添加的name属性 constructor() { this.name="Sithome";//构造函数中给name属性赋值 } ngOnInit() { }}修改user-item.component.html,内容如下：
<p> {{name}}</p>上面代码使用了模板标签{{}}，因为模板和组件绑定着，渲染模板时标签中的name将会被组件中name的属性值替代。
刷新浏览器验证上面的修改是否起作用。页面展示如下：
app works!hello-world works!Sithome用户列表组件示例
上面我们创建了组件来展示单个用户，下面创建一个用户列表组件来展示用户名列表。使用下面命令创建用户列表组件，如下：
ng generate component user-list替换app.component.html中的<app-user-item>标签为<app-user-list>，代码如下：
<h1> {{title}} <app-hello-world></app-hello-world> <app-user-list></app-user-list></h1>修改user-list.component.ts文件在UserListComponent类中添加names属性（类型是string[]），以及在构造函数中给names属性赋值，代码如下：
import { Component, OnInit } from '@angular/core';@Component({ selector: 'app-user-list', templateUrl: './user-list.component.html', styleUrls: ['./user-list.component.css']})export class UserListComponent implements OnInit { names:string[]; constructor() { this.names = ["zhangsan","lisi","wanger","SitHome"]; } ngOnInit() { }}修改user-list.component.html，代码如下：
<ul> <li *ngFor="let name of names">{{ name }}</li></ul>在模板文件中使用了<ul>列表标签。在<li>标签中使用了*ngFor="let name of names"命令，这个命令的作用就是：循环names数组，生成<li>标签列表。
在终端中启动HTTP服务，访问http://localhost:4200/，页面展示结果如下：
app works!
hello-world works!
- zhangsan
- lisi
- wanger
- SitHome
在用户列表组件中使用单个用户组件
之前创建的单个用户组件和用户列表组件没有关联，正常的情况下，用户列表应该有多个用户组成。下面就说一下怎样把单个用户组件和用户列表组件整合到一块。需要分三步、
- 修改user-list.component.html，在此模板中使用<app-user-item>标签
- 修改user-item.component.ts，使name属性可以接收外部传入的值
- 修改user-list.component.html，以便给用户组件传入name的值
修改user-list.component.html
代码如下：
<ul> <app-user-item *ngFor="let name of names"></app-user-item></ul>浏览器刷新页面结果如下：
app works!hello-world works! Sithome Sithome Sithome Sithome从结果中可以看到用户列表都是相同的，这是因为单个用户组件没有接收外部传入的用户名，还是使用自己构造函数中设置的用户名。
修改user-item.component.ts
代码如下：
import { Component, OnInit, Input} from '@angular/core';@Component({ selector: 'app-user-item', templateUrl: './user-item.component.html', styleUrls: ['./user-item.component.css']})export class UserItemComponent implements OnInit { @Input() name:string; constructor() {} ngOnInit() { }}浏览器刷新页面结果如下：
app works!hello-world works!从结果中发现用户列表一个用户也不显示了，这是由于user-item.component.ts的改动导致，上面的改动是name属性的值需要从外部传入，而外部没有传入值导致name属性是空。
再次修改user-list.component.html
代码如下：
<ul> <app-user-item *ngFor="let name of names" [name]="name"></app-user-item></ul>在<app-user-item>标签中我们添加了[name]="name"属性，在Angular中[name]表示我们想传一个值给组件的name属性，具体是什么值由'"name"决定，当*ngFor命令迭代names时会把每一次的迭代的值赋给name。
浏览器刷新页面结果如下：
app works!hello-world works! zhangsan lisi wanger SitHome到此组件的小例子已经完成，它还是比较简单的。随着慢慢的学习，写出来的Angular应用会慢慢丰富起来的。
欢迎关注，互相交流学习
个人博客地址：http://sithome.oschina.io
