Angular 부모 자식 컴포넌트끼리 데이터 공유 @Input(), @Output()

부모 자식 디렉티브/컴포넌트끼리 데이터 공유하기

+ @Input(), @Output

 

 

구조 알아보기.

<parent-component>
  <child-component></child-component>
</parent-component>

이런 구조가 있다고하면 parent-component는 child-component의 컨텍스트를 제공하는 역할을 한다.

 

@Input(), @Output() 데코레이터를 활용하면 자식컴포넌트가 부모 컴포넌트와 통신할 수 있다.

input은 부모컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때

output은 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달할 때 사용

 

@Input()

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

Input 심볼을 로드해야한다.

typescript 파일에서 html파일로 바인딩하려면 {{}} 이 문법 사용하면 되는데

ts파일끼리 데이터를 주고받으려면 데이터를 받는(자식 컴포넌트에) component ts파일에 @Input() 데코레이터를 사용하여 프로퍼티를 선언하고

데이터를 보내는(부모 컴포넌트) component의 html파일에서

위와 같이 바인딩해준다. 이렇게하면 부모 컴포넌트의 seletedHero의 값이 자식 컴포넌트의 hero변수로 전달된다.

 

Input() 프로퍼티로 전달되는 값이 변경되는 감시하려면 Angular life cycle hooking함수중 OnChanges를 활용하면 된다.

 

마지막으로 데이터를 받는 hero-detail.component.html파일에서 데이터를 받아 출력하는 코드이다. *ngIf =“value” 이 부분은 value값이 undefined가 아니면 출력하는 것이고

상단에 [(ngModel)]부분 때문에 hero는 양방향 바인딩이 돼서 이름변경중이면 아래사진과 같이 이름이 변경되지만 하단에 Name: {{abc}}부분은 한방향 바인딩이기 때문에 변경되지 않는다.

 

최종 결과

 

 

@Output()

Output() 데코레이터는 자식 컴포넌트 프로퍼티 중 부모 컴포넌트로 데이터를 보내는 프로퍼티 지정 역할을 한다.

 

input 엘레먼트에 문자열을 입력하고 버튼 클릭하면 이벤트 발생시키기

 

1. 자식 컴포넌트 클래스 파일에 Outputm EventEmitter 심볼을 로드

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

2. 컴포넌트 클래스에서 프로퍼티에 데코레이터 지정

아래 예제는 자식 컴포넌트에 EventEmitter타입으로 선언된 newItemEvent프로퍼티에 @Output 데코레이터 지정한 코드

//child-component.ts
@Output() newItemEvent = new EventEmitter<string>();
addNewItem(value:string) {
this.newItemEvent.emit(value);
}

3. 자식 컴포넌트 템플릿 설정

//childe-component.html
<label for="item-input">Add an item: </label>
<input type="text" id="itme-input" #newItem>
<button (click)="addNewItem(newItem.value)"> Add to parent's list</button>

4. 부모 컴포넌트 설정

 //app.component.ts  ||parent-component.ts
export class AppComponent {
  items = ['item1', 'item2', 'item3', 'item4'];

  addItem(newItem: string) {
    this.items.push(newItem);
  }
}

5. 부모 컴포넌트 템플릿 설정

//parent-componet.html
<app-itme-output (newItemEvent)="addItem($event)"></app-itme-output>

이벤트 바인딩 (newItemEvent)='addItem($event)'에 사용된 문법을 보면, 자식 컴포넌트에서 newItemEvent 이벤트가 발생하면 부모 컴포넌트 메서드 addItem()을 실행한다.

$event 객체는 자식 컴포넌트에서 보낸 데이터가 담겨 있습니다. 이 예제에서는 자식 컴포넌트 템플릿의 <input>에 사용자가 입력한 값이 전달된다.

 

 

EventEmitter란?

디렉티브를 함께component에서 사용하여 사용자 지정 이벤트를 동기 또는 비동기로 방출하는 것이며 인스턴스를 구독함으로서 이벤트 핸들러를 등록할 수 있음.

class EventEmitter<T> extends Subject<T> {
  constructor(isAsync?: boolean): EventEmitter<T>
  emit(value?: T): void
  subscribe(next?: (value: T) => void, error?: (error: any) => void, complete?: () => void): Subscription
}

 

constructor (isAsync? : boolean):EventEmitter<T>

isAsync true인 경우 이벤트를 비동기식으로 전달

default 값은 false이다.

 

Method

- emit() : 주어진 value를 포함하는 event를 emit함

- subscribe() : 이벤트에 대한 핸들러를 등록함

parameters는

next

error

complete 등이 있다

 

 

 

Reference

https://angular.kr/guide/inputs-outputs#%EC%9E%90%EC%8B%9D-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0