04 컴포넌트 상호작용 01

컴포넌트 상호작용

이 책에는 둘 이상의 컴포넌트가 정보를 공유하는 공통 컴포넌트 통신 시나리오에 대한 레시피가 들어 있습니다.

라이브 예제 /다운로드 예제를 참조하십시오.

 

입력 바인딩으로 부모에서 자식으로 데이터 전달

HeroChildComponent에는 일반적으로 @Input 데코레이터로 장식 된 두 개의 입력 프로퍼티가 있습니다.

component-interaction/src/app/hero-child.component.ts

import { Component, Input } from '@angular/core';   import { Hero } from './hero';   @Component({   selector: 'hero-child',   template: `     <h3>{{hero.name}} says:</h3>     <p>I, {{hero.name}}, am at your service, {{masterName}}.</p>   ` }) export class HeroChildComponent {   @Input() hero: Hero;   @Input('master') masterName: string; }

두 번째 @Input은 자식 컴포넌트 프로퍼티 이름인 masterName의 별칭을 'master'로 지정합니다.

HeroParentComponent는 자식 HeroChildComponent를 *ngFor 리피터 내에 포함하여 master 문자열 프로퍼티를 자식의 master 별칭에 바인딩하고 각 반복의 hero 인스턴스를 자식의 hero 프로퍼티에 바인딩합니다.

component-interaction/src/app/hero-parent.component.ts

import { Component } from '@angular/core';   import { HEROES } from './hero';   @Component({   selector: 'hero-parent',   template: `     <h2>{{master}} controls {{heroes.length}} heroes</h2>     <hero-child *ngFor="let hero of heroes"       [hero]="hero"       [master]="master">     </hero-child>   ` }) export class HeroParentComponent {   heroes = HEROES;   master = 'Master'; }

실행중인 응용프로그램에는 세 가지 영웅이 표시됩니다.