对话框显示大约一秒钟,然后隐藏。也许我可以使用这个选项“autoCloseTimeout”将超时设置为一两分钟作为解决方法,但我希望有一个更清洁的解决方案来解决这个问题。我看到一个评论说这是因为弹出窗口正在失去焦点。我通过在弹出窗口上放置一个文本框并立即单击它来排除这一点。
这是html
<span>
<a href="#" title="Delete" class="myItem"
(click)="showConfirm(item.id)">
<span class='glyphicon glyphicon-trash toolbarItem'></span>
</a>
</span>
这是Typescript组件中的方法
showConfirm(blkId: string) {
let disposable = this.dialogService.addDialog(ConfirmComponent, {
title: 'Confirm title',
message: 'Confirm message'
})
.subscribe((isConfirmed) => {
//We get dialog result
if (isConfirmed) {
alert('accepted');
}
else {
alert('declined');
}
});
//We can close dialog calling disposable.unsubscribe();
//If dialog was not closed manually close it by timeout
setTimeout(() => {
disposable.unsubscribe();
}, 4000); //changign this value has no affect
}
这是ConfirmDialog组件来源:
import { Component } from '@angular/core';
import { DialogComponent, DialogService } from "ng2-bootstrap-modal";
export interface ConfirmModel {
title: string;
message: string;
}
@Component({
selector: 'confirm',
template: `<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" (click)="close()" >×</button>
<h4 class="modal-title">{{title || 'Confirm'}}</h4>
</div>
<div class="modal-body">
<p>{{message || 'Are you sure?'}}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" (click)="confirm()">OK</button>
<button type="button" class="btn btn-default" (click)="close()" >Cancel</button>
</div>
</div>
</div>`
})
export class ConfirmComponent extends DialogComponent<ConfirmModel, boolean> implements ConfirmModel {
title: string;
message: string;
constructor(dialogService: DialogService) {
super(dialogService);
}
confirm() {
// we set dialog result as true on click on confirm button,
// then we can get dialog result from caller code
this.result = true;
this.close();
}
}
我使用以下版本: 角2.4.5, angular2-platform-node,~2.0.11 bootstrap:^ 3.3.7