Angular 父子Component的数据绑定实现

看个具体的例子：

我有一个风格为Master Detail的Angular应用。下图红色高亮区域包含了一个hero detail Component，即下图蓝色高亮区域所示。

这两个Component的selector可以在Chrome开发者工具的element标签页里看到：

具体实现步骤：

(1) 在app.module.ts里导入app-heroes和app-hero-detail这两个selector对应的Component，并在NgModule里声明：

(2) 在hero detail Component里定义一个Hero属性，使用装饰器@Input修饰，告知Angular，当其他Component嵌入该Component时，需要将值绑定到这个输入属性上。

detail Component的html没有特殊之处，显示属性hero对应的字段：

(3) parent Component，即消费这个detail Component的hero Component，将当前li里选中的hero实例绑定给detail Component使用@Input修饰的属性hero:

<h2>My Heroes</h2>

<ul class="heroes">
  <li *ngFor="let hero of heroes"
    [class.selected]="hero === selectedHero"
    (click)="onSelect(hero)">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>
</ul>

<app-hero-detail [hero]="selectedHero"></app-hero-detail>

如果移除掉detail Component里的@Input修饰器，

会出现编译错误：