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

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

1.上一节的详情内容

<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>

2.建立英雄详情组件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 会拒绝绑定，并抛出错误。

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