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将转换传递给父级和从父级传递。可以轻松修改以下示例以满足您的需求。如果您需要将孩子的值传递给父级，您可以在事件发射器中执行此操作，方法是将类型更改为var iterator = [1, 2, 3].cycle.makeIterator() print(iterator.next()!) // 1 print(iterator.next()!) // 2 print(iterator.next()!) // 3 print(iterator.next()!) // 1 // Etc.，然后在模板上将其更改为EventEmitter< any > emit会传递您要在事件(deleteEvent)="delete($event)"中发送的值。

我的删除模式ts

this.deleteEvent.emit(true);

我的删除模式HTML

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();
    } 

}

在我想要显示对话框的组件

上

<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>

Answer 2

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

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

2 个答案: