컴포넌트 분리 ( 컴포넌트간 통신 @input )

프로젝트가 커질 수록 컴포넌트는 여러개로 쪼개서 유지보수가 쉽도록 해야한다.

 

직전까지 만들었던 프로젝트에서는 

 

  - 영웅들의 리스트

  - 선택된 영웅의 디테일 정보

둘다 얻어낼수 있었다.

 

이제 디테일정보를 보여주는 컴포넌트는 따로 분리해보도록 하겠다.

 

1. 새로운 컴포넌트 생성

ng generae component hero-detail

 

2. 기존의 컴포넌트에서 일부를 떼서 붙여넣기

 

  >hero.component.html에 있던  <div *ngIf="selectedHero">를 잘라내기하여

 

  >hero-detail.component.html 에 붙여넣는다.

   우리는 이 디테일 컴포넌트를 어디에서든 사용할 수 있어야 하므로 

    *ngIf="hero"로 바꾸어 준다.  (나중에 input으로 받을것)

----------hero-deatail.component.html----------------

<div *ngIf="hero">
  
  <p>선택된 히어로 :</p>
  {{ selectedHero.name }} <span>의 디테일수정</span>
  <div>
    id : {{ selectedHero.id }}
    <input [(ngModel)]="selectedHero.name" placeholder="이름입력" />
  </div>
</div>

 

3. 다음과 같이 input 을 받을수 있도록 설정, input을 해준다.

---------- hero-detail.component.ts------------
import { ..., Input,...} from '@angular/core';

import Hero from '../hero/hero'
export class ... {
   ...
  @Input() hero: Hero;
   ...
}

---------- hero. component . html --------------
// 중요!! 다음과 같이 컴포넌트 사용 //

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

 

4. app.module.ts 에 컴포넌트를 등록한다. ( ng generate는 자동으로됨

------ app.module.ts ------

import { HeroDetailComponent } from './hero-detail.component';

declarations: [
  AppComponent,
  HeroDetailComponent
],