[Angular] Input , Output 데코레이터

Q. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 주고싶다.

 

이때 사용하면 되는것이 Input, Output 데코레이터이다.

본인은 자식 컴포넌트를 팝업창처럼 띄우고 자식컴포넌트에 데이터를 전달한뒤 종료했을때 종료했다는 사인을 부모 컴포넌트로 받고 팝업창을 닫을때 사용했었다. 바로 사용법을 알아보자.

 

@Input

• 부모컴포넌트에서 자식컴포넌트로 데이터를 전송할때 사용한다.
• 자식컴포넌트에서 @Input() 데코레이터를 통해서 데이터를 전송받는다. 대문자로 시작함에 유의하자.
• 헤더에 타이틀이 바뀔때 @Input() 데코레이터를 통해서 컴포넌트별로 타이틀값만 넣어주는 방식으로 구현할수도있다.

코드 예제를 살펴보자 부모로부터 "insertData"라는 값을 자식으로 전달하여 출력하는 예제이다.

// app-child-component.ts

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

export class ChildComponent implements OnInit {

    //부모로 부터 데이터를 받을 변수 이름
    @Input() data:any
}

// app-parent-component.html

// 자식 컴포넌트에 있는 data 변수에
// 부모 컴포넌트의 parentData데이터를 넣어준다.
<app-child [data]= "parentData"></app-child>

// app-parent-component.ts
export class ChildComponent implements OnInit {

    parentData = "insertData";
}

// app-child-component.html
<span>{{data}}</span> //출력결과는 insertData

 

{{}}는 Angular에서 Html상에서 변수를 사용하고싶을때 {{}}안에 변수명을 입력하면된다.

@Output

• 자식컴포넌트에서 부모컴포넌트로 데이터를 전송할때 사용한다.
• 자식 컴포넌트에서 @Output 데코레이터와 EventEmitter, emit 메소드를 이용하여 데이터를 전송한다
• 부모 컴포넌트에서는 $event메소드로 값을 전달 받는다.

//app-child-component.ts
import { Output, EventEmitter } from '@angular/core';

export class ChildComponent implements OnInit {

    constructor(){ //생성자 (프로그램이 실행될때 한번 실행된다.)
        this.sendData(); //sendData 함수 실행
    }
    
    @Output() postData = new EventEmitter; //부모로 보낼 변수 이름

    data = "Post Data !!"

    sendData(){
        postData.emit(this.data)  // emit메소드로 데이터를 보낸다.
    }
}

//app-parent-component.html
// 자식컴포넌트에서 전송한 postData를 $event메소드로 전달 받는다.
<app-child-component (postData)="showData($event)"></app-child-component>

//app-parent-component.ts
showData(data){
	console.log(data) // 출력되는 데이터는 Post Data !! 이다. 
}

 

Input을 쓴다고 꼭 Output을 써야하는것은아니다. 상황에 맞게 적절하게 사용하도록하자.