Component- Event

@Output - angular/core (컴포넌트 이벤트 바인딩)

-EventEmitter를 이용하여, emit을 실행함. 주의, 제네릭에 클래스를 넣어 진행.

Tip: @Output('customName') 을 사용하면, 외부로 노출되는 @Output() 변수명 : {}의 변수명을 노출하지 않음.

작동 원리 :

0. ts의 EventEmitter 및 onComponentEevet가 선언.

1. component.hmtl의 click이벤트 발생.

2. eventDirective에 EventEmitter가 주입되어 있으므로, eventDirective.emit을 통하여 event를 날림.

3. parent.html의 onParentEvent()로 연결된 이벤트를 실행함.

parent.component.ts

eventElements = [{type: 'customEvent', name: 'Testevent', content: 'Just a test!'}];

onEventAdded(eventData: {eventName: string, eventContent: string}) {

this.eventElements.push({

type: 'customEvent',

name: eventData.eventName,

content: eventData.eventContent

});

}

parent.component.html

<div class="container">

<app-cockpit (eventCreated)="onEventAdded($event)">

</app-cockpit>

</div>

cockpit.component.ts

@Output() eventCreated = new EventEmitter<{eventName: string, eventContent: string}>();

newEventName = '';

newEventContent = '';

onAddEvent() {

this.eventCreated.emit({

eventName: this.newEventName,

eventContent: this.newEventContent

});

}

cockpit.component.html

<div class="row">

<div class="col-xs-12">

<label>Event Name</label>

<input type="text" class="form-control" [(ngModel)]="newEventName">

<label>Event Content</label>

<input type="text" class="form-control" [(ngModel)]="newEventContent">

<br>

<button

class="btn btn-primary"

(click)="onAddEvent()">Add Event</button>

</div>

</div>