ISSUE
문의버튼을 클릭했을 때 모달이 열리는 이슈- 아이템 전체 요소에
clickevent를 걸어서 자식 요소를 클릭했을 때도 event가 발생하는 원인
해결 방안
- click event를 인자로 넘겨준다.
- 문의 버튼 element를 ViewChild로 받아서 ts에서 제어한다.
telElelement에 event.target이 포함(contains()) 되어있지 않으면 모달을 열어준다.
HTML
<div class="item-container" (click)="openModal($event)">
......
<a #telEl [href]="'tel:'+lesson.phoneNumber[0]">
<si icon="phone-alt-solid"></si>
<span>문의</span>
</a>
......
</div>TS
@ViewChild('telEl') telEl: ElementRef;
openModal(event) {
if (!this.telEl.nativeElement.contains(event.target)) {
this.bsModalService.show(MobileAcademyItemModalComponent, {
initialState: { lesson: this.lesson }
})
}
}