Question

我正在使用Angular 6，并利用HostListener事件从自定义模式触发警报消息，以供用户尝试刷新或关闭浏览器时使用。我的问题是，当激发HostListener时，如何使用正确的模板触发此自定义模式？现在，我有一个模态函数的草稿，该模态函数是通过按钮触发的，该按钮具有HTML上的click事件，该事件从按钮下方的模态模板接收模板ID。我正在尝试使用ngx-bootstrap库，但我正在寻找一种仅实现常规引导程序的解决方案。

<button type="button" class="btn btn-primary" (click)="openModal(template)">Save & Exit</button>

<ng-template #template>
    <div class="modal-header text-center">
        <h4 class="modal-title" style="color: white;">Are you sure you want to leave?</h4>
    </div>
    <div class="modal-body text-center">
          <span style="margin-right: 100px;"><button type="button" class="btn btn-success btn-lg" (click)="modalRef.hide()">Stay</button></span>
          <span><button type="button" class="btn btn-danger btn-lg" >Leave</button></span>
    </div>
</ng-template>

这是我组件中的代码：

openModal(template: TemplateRef<any>) {
  this.modalRef = this.modalService.show(template,{ backdrop: 'static', keyboard: false });
}

@HostListener('window:beforeunload', ['$event'])
public doSomething($event) {
    console.log("Listener works!") 

    return false;
}

在启动HostListener时如何初始化该模态函数，并在此函数中携带模板？

Angular HostListener初始化自定义模式

0 个答案: