@Output 이벤트

lee jae hwan·2022년 9월 7일

앵귤러

목록 보기
34/83

하위컴포넌트에 Output속성을 사용하여 하위컴포넌트에서 발생된 이벤트로 상위컴포넌에 데이터를 전달할 수 있다.

<button (click)="onClicked($ev)"></button>

(click)은 버튼 클릭이벤트가 발생함을 나타낸다.

<app-voter *ngFor="let voter of voters" [name]="voter" (voted)="onVoted($event)"></app-voter>

(voted)="onVoted($event)"은 app-voter컴포넌트에서 voted이벤트가 발생함을 나타낸다.

사용자정의 이벤트는 컴포넌트에서 발생시켜서 전파해야 한다.

사용자정의 이벤트를 발생시킬때는 EventEmitter객체를 사용하며 옵저버블객체와 유사하게 작동한다.


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

voted 컴포넌트속성에 옵저버블객체를 할당한다.

voted는 상위컴포넌트에서

<app-voter *ngFor="let voter of voters" [name]="voter" (voted)="onVoted($event)"></app-voter>

onVoted함수로 구독되어진다.

하위컴포넌트에서

this.voted.emit(agree);

상태변화를 전파하면 상위컴포넌트의 onVoted($event)로 인자를 전달하면서 함수가 호출된다.

0개의 댓글