Angular 数据传递

1： 点击序号 ， 出现相应的详情页面在同一个页面中 ，

hero-list-component.ts 

selectedHero: Hero;
 onSelect(hero: Hero): void {
    this.selectedHero = hero;
  }

hero-list-html

<div *ngIf="heroes.length">
    <ul class="heroes">
      <li *ngFor="let hero of heroes"
          [class.selected]="hero === selectedHero"
          (click)="onSelect(hero)">

        <span class="badge">{{hero.id}}</span> ------{{hero.name}}</span>
       
      </li>
    </ul>
  </div>
<app-hero-detail [hero]="selectedHero"></app-hero-detail>

2:  hero-detail-component.ts  接收点击的对象

@Input() hero: Hero;