使用EventEmmiter时页面重新加载

Question

我有父/子组件设置。父项有一个显示子组件的按钮（显示表单），子项有一个隐藏子组件的按钮（取消）。

当我按下取消按钮时，表单会消失，但由于某种原因页面会重新加载，任何想法为什么或如何防止这种情况？

当我使用父级中的按钮显示或隐藏表单时，只有当我使用子级中的按钮时，才会发生这种情况。

父HTML

<div *ngIf="showContactDetail" class="panel-body">
    <app-contact-detail 
        (showContactDetail)='setShowContactDetail($event)'>
    </app-contact-detail>
</div>

家长TS

setShowContactDetail(value: boolean) {
    this.showContactDetail = value;
}

儿童HTML

 <button id="cancelContact" name="cancelContact" 
            class="btn btn-danger" (click)='cancelClicked()'>Cancel</button>

儿童TS

@Output() showContactDetail: EventEmitter<boolean> =
    new EventEmitter<boolean>();

cancelClicked(): void {
    this.showContactDetail.emit(false);
}