angular学习005主从组件

参考来源：https://www.angular.cn/tutorial/toh-pt3
ng generate component hero-detail

1、详情模板app\hero-detail\hero-detail.component.html

<div *ngIf="hero">
  <h2>{{ hero.name | uppercase }} Detail </h2>
  <div><span>id:</span>{{hero.id}}</div>
  <div>
    <label>name:
      <input [(ngModel)]="hero.name" placeholder="name">
    </label>
  </div>
</div>

2、详情组件app\hero-detail\hero-detail.component.ts

import {Component, OnInit, Input} from '@angular/core';
import {Hero} from '../hero';

@Component({
  selector: 'app-hero-detail',
  templateUrl: './hero-detail.component.html',
})

export class HeroDetailComponent implements OnInit {
  @Input() hero: Hero;

  constructor() {
  }

  ngOnInit() {
  }
}

3、列表组件添加详情组件的选择器app\heroes\heroes.component.html

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

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