如何使用ngx-bootstrap模式获得响应“是”或“否”

Question

我正在使用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
}

这样我就可以在任何想要执行这两个操作的地方使用此方法。这可能吗？

Answer 1

我正在使用ngx-bootstrap模式进行删除模式。要使其正常工作，您需要使用@Input和@Output将转换传递给父级和从父级传递。可以轻松修改以下示例以满足您的需求。如果你需要将一个值从子项传递给父项，你可以在事件发射器中通过将类型更改为类似EventEmitter< any >来实现，并在模板上将其更改为(deleteEvent)="delete($event)"，在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>

Answer 2

如果你想要一个通用的Yes / No组件，一种方法是在initialState之外创建一个回调方法，然后使用该方法在Yes / No组件和使用它的组件之间进行通信。类似于什么they are doing。