Componentt 간 통신 Emmit

컴포넌트간 데이터 전달 캡슐화가 확실히 잘되어있다라고 느낌.

예를 들어 

위와 같이 Child에서 발생한 Event 를 Parent 컴포넌트에 전달시켜 주려면

@Output() 이란 어노테이션을 사용해야 한다. 

EX). user-info 라는 컴퍼너는를 포함한 Component Parent 가 있다고 하면 

user-info 가 Child 포함한 Component Parent 가 Parent  가 된다 말이 이상하네.. a 

user-info 에 EventEmitter 를 등록 클릭시 emit 해준다고 가정 

user-info Component

@Output()
gnbOpenEvent = new EventEmitter<boolean>();

gnbOpen(){
    console.log(">>> gnbOpen called Child <<<");
    if(this.isOpen){
        this.isOpen = false;
    }else{
        this.isOpen = true;
    }

    this.gnbOpenEvent.emit(this.isOpen);
}

이런식으로 작성이 될것이고 Parent 내에서 받을때는 

tempate 내에 

<user-info
    (gnbOpenEvent) = "gnbOpen($event)"
></user-info>

이벤트를 받을 부분 지정 

menuOpened : boolean = true;

gnbOpen(menuOpened){
    console.log(">> gbnOpen called Parent <<" + menuOpened);
    this.menuOpened = menuOpened;
}

받는 처리는 위와 같이 하면 된다.

이해하자면 간단하지만 컴퍼넌트라는 개념자체가 생소해서 좀 애먹었네;; 이제 늙었나 봅니다.