컴포넌트 통신 - ChoDragon9/posts GitHub Wiki

입력 프로퍼티

부모 컴포넌트에서 보내는 데이터는 @Input 데코레이터로 지정한 입력 프로퍼티로 받는다. @Input() 어노테이션을 사용하면 두 컴포넌트가 부모-자식 관계인것을 알 수 있다.

@Component({
  selector: 'order-procesor',
  template: `Buying {{ quantity }} shares of {{ stockSymbol }}`
})
class OrderComponent {
  @Input() stockSymbol : string;
  @Input() quantity : number;
}

@Component({
  selector: 'app',
  template: `
  <input type="text" (input)="onInputEvent($event)">
  <order-processor [stockSymbol]="stock" quantity="100"></order-processor>
  `
})
class AppComponent {
  stock: string;
  onInputEvent ({target}) : void {
    this.stock = target.value
  }
}

출력 프로퍼티와 커스텀 이벤트

커스텀 이벤트를 보내려면 @Output() 어노테이션을 사용해서 출력 프로퍼티를 지정하고, EventEmitter 객체의 emit() 함수를 실행하면 이벤트 정보를 함께 전달하면 된다.

import { EventEmitter } from '@angular/core';

interface IPriceQuote {
  stockSymbol : string;
  lastPrice : number;
}
@Component({
  selector: 'order-procesor',
  template: `Buying {{ quantity }} shares of {{ stockSymbol }}`
})
class OrderComponent {
  @Output() lastPrice : EventEmitter<IPriceQuote> = new EventEmitter();
  constructor () {
    setInterval (() => {
      let priceQuote : IPriceQuote = {
        stockSymbol : this.stockSymbol
        lastPrice : 100 * Math.random()
      }

      this.lastPrice.emit(priceQuote)
    }, 1000)
  } 
}

@Component({
  selector: 'app',
  template: `
  <order-processor (lastPrice)="priceQuoteHandler($event)"></order-processor>
  `
})
class AppComponent {
  stockSymbol: string;
  price: number;
  priceQuoteHandler (event : IPriceQuote) {
    this.stockSymbol = event.stockSymbol;
    this.price = event.lastPrice;
  }
}