더 세밀하게 구성 요소로 분할

상세 구성요소

상세 부분을 다른 컴포넌트로 나누어 개발하기 쉽습니다.

터미널

$ cd src/app
$ ng generate component hero-detail

html 변경

먼저, 먼저 만든 heroes 컴포넌트의 HTML을 다음과 같이 변경합니다.

heroes.component.html

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

상세 부분의 기술을 지우고, 대신에 컴퍼넌트 태그를 씁니다.[hero]='selectedHero' 라고 쓰면 hero-detail 컴포넌트에 hero라는 프로퍼티를 값으로 전달할 수 있습니다.
그러나 hero-detail 컴포넌트에서 사용하려면 ts 파일로 처리해야합니다.

ts에서 속성을받을 준비

hero-detail.component.ts

import { Component, OnInit, Input } from '@angular/core';
//Inputを追加でimport(@Input()を使うため)
import {Hero} from '../hero';

@Component({
  selector: 'app-hero-detail',
  templateUrl: './hero-detail.component.html',
  styleUrls: ['./hero-detail.component.css']
})
export class HeroDetailComponent implements OnInit {

  @Input() hero : Hero;//ここでプロパティを宣言している

  constructor() { }

  ngOnInit() {
  }

}

@Input 를 import 사용하면 속성을 받아 동일한 구성 요소의 html에서 사용할 수 있습니다.

hero-details.component.html

<div *ngIf="hero">

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

</div>

나누기 전과 같으면 잘 구성 요소로 나눌 수 있습니다.