ngx-bootstrap modal:如何从模式中获取返回值? [英] ngx-bootstrap modal: How to get a return value from a modal?

问题描述

在我的Angular 4应用中，假设我在服务中.

In my Angular 4 app, let's assume that I'm inside a service.

在某个时候我想问用户一个确认，目前我只是通过confirm(...)请求来完成此操作:

At some point I want to ask to the user for a confirmation, currently I'm doing it with just a confirm(...) request:

const result = confirm('Are you sure?');

如果我想显示一个带有两个按钮是"或否"并获得相似结果的ngx-bootstrap 模式，又该怎么办?

what if instead I would like to show a ngx-bootstrap modal with, let's say, two buttons "Yes" or "No" and obtain a similar result?

编辑:就我而言，我通过与Subjects一起玩解决了问题. 此处，您可以找到我的解决方案，以防其他人使用.但是，该解决方案不能解决这个问题，该问题涉及从模态返回值，因此我将其保持打开状态.

EDIT: in my case, I solved my issue by playing with Subjects. Here you can find my solution, in case it can be useful for someone else. However that solution does not solve this question which is about returning a value from a modal, so I leave it open.

推荐答案

尝试这样:

myexample它运行正常.希望这对您有帮助

myexample it's working correctly. hope this will help you

home.module.ts

import { ModalModule } from 'ngx-bootstrap';

@NgModule({
    imports: [
        ModalModule.forRoot()
    ]
})

home.component.html

<button class="btn btn-primary" (click)="openConfirmDialog()">Open Confirm box</button>

home.component.ts

import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/modal-options.class';

export class HomeComponent {
    public modalRef: BsModalRef;
    constructor(
        private homeService: HomeService,
        private modalService: BsModalService
    ) { }

    openConfirmDialog() {
        this.modalRef = this.modalService.show(HomeModalComponent);
        this.modalRef.content.onClose.subscribe(result => {
            console.log('results', result);
        })
    }
}

home-modal.component.html

<div class="alert-box">
    <div class="modal-header">
        <h4 class="modal-title">Confirm</h4>
        <button type="button" class="close" aria-label="Close" (click)="bsModalRef.hide()">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        Are you sure want to delete this node?
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" (click)="onConfirm()">Yes</button>
        <button type="button" class="btn btn-secondary" (click)="onCancel()">No</button>        
    </div>
</div>

home-modal.component.ts

import { Subject } from 'rxjs/Subject';
import { BsModalRef } from 'ngx-bootstrap/modal';

export class HomeModalComponent {

    public onClose: Subject<boolean>;

    constructor(private _bsModalRef: BsModalRef) {

    }

    public ngOnInit(): void {
        this.onClose = new Subject();
    }

    public onConfirm(): void {
        this.onClose.next(true);
        this._bsModalRef.hide();
    }

    public onCancel(): void {
        this.onClose.next(false);
        this._bsModalRef.hide();
    }
}

这篇关于ngx-bootstrap modal:如何从模式中获取返回值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！