angularjs2进阶教程3-建立英雄详情组件

还是angularjs2入门1-文件结构分析的源码，将app名称tutorial-step3-multipleComponents

<div *ngIf="selectedHero">
                <h2>{{selectedHero.name}} details!</h2>
                <div><label>id: </label>{{selectedHero.id}}</div>
                <div>
                  <label>name: </label>
                  <input [(ngModel)]="selectedHero.name" placeholder="name"/>
                </div>
              </div>

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

import { Component,Input } from '@angular/core';
import { Hero } from './hero';
@Component({
  selector: 'my-hero-detail',template: `
    <div *ngIf="hero">
      <h2>{{hero.name}} details!</h2>
      <div><label>id: </label>{{hero.id}}</div>
      <div>
        <label>name: </label>
        <input [(ngModel)]="hero.name" placeholder="name"/>
      </div>
    </div>
  `
})
export class HeroDetailComponent {
  @Input()
  hero: Hero;
}

因为详情组件是从父组件[hero]="selectedHero"获取内容的，所以要在组件方法中加入@Input()

hero是属性绑定的目标— 它位于等号 (=) 左边方括号中

Angular 希望我们把目标属性声明为组件的输入属性，否则，Angular 会拒绝绑定，并抛出错误。

我们有几种方式把声明成输入属性。 这里我们采用首选的方式：使用我们前面导入的@Input装饰器向属性添加注解