[英]How to get response 'yes' or 'no' using ngx-bootstrap modal
我正在使用ngx-bootstrap模式,但我想使用这样的东西
confirmDialog(message: string, note: string, onOk, onCancel) {
// modal open
// on click onOk button some action perform
// on click onCancel button some action perform
}
这样我就可以在任何想要执行这两个操作的地方使用此方法。 这可能吗?
我正在使用ngx-bootstrap模式进行删除模式。 要使其正常工作,您需要使用@Input和@Output将转换传递给父级和从父级传递。 可以轻松修改以下示例以满足您的需求。 如果您需要将值从子项传递给父项,您可以在Event Emitter中通过将类型更改为类似EventEmitter< any >
并在模板上将其更改为(deleteEvent)="delete($event)"
on the emit传递你想要在事件中发送的值this.deleteEvent.emit(true);
。
我的删除模式ts
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { BsModalRef } from "ngx-bootstrap";
@Component({
selector: 'delete-modal',
templateUrl: './delete.modal.component.html'})
export class DeleteModalComponent {
@Input() modalRef: BsModalRef;
@Output() deleteEvent = new EventEmitter();
constructor() { }
delete(): void {
this.deleteEvent.emit();
}
}
我的删除模式HTML
<div class="modal-header">
<h3 class="modal-title pull-left">Confirm Delete</h3>
</div>
<div class="modal-body">
<p>Do you really want to delete item?</p>
<div class="pull-right">
<a class="btn btn-primary" role="button" (click)="delete()">Ok</a>
<a class="btn btn-default" role="button" (click)="modalRef.hide()">Cancel</a>
</div>
<div class="clearfix"></div>
</div>
在我想要显示对话框的组件上
/*add a template somewhere*/
<ng-template #delete>
<delete-modal [modalRef]="modalRef" (deleteEvent)="delete()"></delete-modal>
</ng-template>
如果你想要一个通用的Yes / No组件,一种方法是在initialState之外创建一个回调方法,然后使用该方法在Yes / No组件和使用它的组件之间进行通信。 与他们正在做的相似。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.