初识Angular2的组件通信

Angular2中免不了进行父子组件的通信，现在就稍微的了解一下父组件怎么给子组件传值，首先，通过Angular-cli生成组件，运行命令：

ng generate component user-item

生成子组件，然后生成父组件

ng generate component user-list

ok,现在组件以及html模板文件都已经生成，然后在user-list.component.ts中写下如下代码

在模板文件中如下

<ul>
  <li *ngFor='let name of names'>Hello,{{name}}</li>
</ul>

然后在浏览器技能显示

这样的话，说明初步完成，接下来需要操作子组件user-item.component.ts，如下

@Input()这是一个装饰器，这是angular2定义的语法，用于接收父组件传递过来的数据，接下来我们需要更改父组件的模板文件(user-list.component.html)，改成这样

<ul>
  <app-user-item *ngFor='let name of names' [name]='name'>Hello,{{name}}</app-user-item>
</ul>

如果页面显示效果是这样的，就说明成功了，

注意， 我们在app-user-item标签上添加了新属性[name]="name"。
在Angular中， 添加一个带方括号的属性（ 比如[foo]） 意味着把一个值
传给该组件上同名的输入属性（ 比如foo） 。在这个例子中， name右侧的值来自ngFor中的let name ...语句，[name]部分指定的是UserItemComponent上的Input。也就是说‘’*ngFor='let name of names' 中循环获取的name的值，然后作为" [name]='name' "中的‘name’,然后赋值给[name],传递给子组件user-item，然后用

@Input() name:string
```来接收
注意， 我们正
在传入的并不是字符串字面量"name "， 而
是name变量的值， 也就是names中的每个元素。也就是说
(1)在names中迭代；
(2) 为names中的每个元素创建一个新的UserItemComponent；
(3) 把当前名字的值传给UserItemComponent上名叫name的Input属性
以上是对Angular2的父子通信的简单认识，深入了解，敬请关注后续更新。