我想捕获引导程序模式对话框的close事件来完成某些工作,但不知道如何执行此操作。我首先想到的是将事件绑定到按钮,但是这样做有点无效,因为单击对话框外部时可以关闭对话框。我已经搜索并收集了一些解决方案,但有些解决方案无效或与Angular 6无关。希望这里的人知道该怎么做。非常感谢!
这是我的模态:
<div class="modal fade" id="listNamecardShare" tabindex="-1" role="dialog" aria-labelledby="listNamecardShareTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="listNamecardShareTitle">Select namecards to share</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<table class="table table-hover">
<thead>
<tr>
<th>Fullname</th>
<th>Company</th>
<th>Select</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of namecards">
<td>{{ item.fullname }}</td>
<td>{{ item.company }}</td>
<td><input type="checkbox" [(ngModel)]="selected[namecards.indexOf(item)]"></td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary fas fa-paper-plane" data-dismiss="modal" (click)="onClickSend()"> Send</button>
</div>
</div>
</div>
</div>
我认为其主要思想将类似于以下内容:
fromEvent(htmlElemRef.nativeElement, "shown.bs.modal").subscribe( () => {
console.warn("\tModal is now visible");
});
其中htmlElemRef
是组件的属性之一,定义如下:
ts:
@ViewChild("htmlElemRef", {static: false}) htmlElemRef: ElementRef<HTMLDivElement>;
html:
<div #htmlElemRef class="modal fade" id="listNamecardShare" tabindex="-1" role="dialog" aria-labelledby="listNamecardShareTitle" aria-hidden="true">
但是目前我在编写这些行时,我仍然无法使用fromEvent
使它正常工作(当我发现时将进行编辑,所以我正在使用以下jQuery解决方法:
$(htmlElemRef.nativeElement).on("shown.bs.modal", () => {
console.warn("\tModal is now visible");
});