Angular는 @Output() 데코레이터를 통해 구성 요소에서 값을 게시할 때 사용되는 EventEmitter 클래스를 제공합니다.

EventEmitter는 임의의 값을 보낼 수 있도록 emit() 메서드를 추가하여 RxJS Subject를 확장합니다. 방출()을 호출하면 방출된 값을 구독한 관찰자의 next() 메소드에 전달합니다.

EventEmitter를 사용하는 실제 예는 홈페이지에서 수행되는 모든 이벤트(click/onChange 등)에 대한 사이드 메뉴 변경 감지와 같습니다.

EventEmitter에서 몇 가지 실습을 해 보겠습니다.

사이드 메뉴에서 EventEmitter가 있는 출력 데코레이터와 닫기/열림의 부울 상태를 갖는 하나의 부울 변수를 생성해야 합니다. 그런 다음 부울 변수의 상태를 변경하고 또한 방출하는 메소드를 생성해야 합니다. 해당 부울 값, 업데이트된 값이 홈인 상위 구성 요소로 이동하도록 합니다.

// side-menu.component.ts

@Output() toggle = new EventEmitter<any>();
visible: boolean = false;

onToggle() {
    this.visible = !this.visible;
    this.toggle.emit(this.visible);
    console.log("from side-menu", this.visible);
  }

<!-- side-menu.component.html -->

<a (click)="onToggle()">Menu</a>

<ul>
    <li>
        <a href="#">Home</a>
    </li>
    <li>
        <a  href="#">About</a>
    </li>
</ul>

따라서 홈 구성 요소 보기에서 사이드 메뉴 하위 구성 요소를 호출하고 side-menu.component.ts에서 위에서 생성한 토글이라는 출력 데코레이터를 추가해야 합니다.

<!-- home.component.html -->

<app-side-menu (toggle)="menuToggle($event)"></app-side-menu>

토글 출력 데코레이터가 side-menu.component.ts에서 방출될 때마다 menuToggle 메서드가 호출됩니다.

// home.component.ts

menuToggle(event) {
    console.log("from home", event);
  }

그게 다야, :)