3

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

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

4

2 回答 2

1

我正在使用 ngx-bootstrap 模式作为删除模式。要使其正常工作，您将需要使用 @Input 和 @Output 将再融资传递给和从父级传递。下面的示例可以轻松修改以满足您的需求。如果您需要将值从子级传递给父级，您可以在事件发射器中通过将类型更改为类似的类型EventEmitter< any >并在模板上将其更改为(deleteEvent)="delete($event)"发射时传递您要发送的值事件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>
于 2017-09-14T03:46:25.083 回答
1

如果你想要一个通用的 Yes/No 组件，一种方法是在 initialState 之外创建一个回调方法，然后使用该方法在 Yes/No 组件和使用它的组件之间进行通信。类似于他们正在做的事情。

于 2019-04-22T20:49:59.690 回答