ngx-bootstrap modal：如何从模态中获取返回值？

Question

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

在某些时候，我想要求用户进行确认，目前我只是通过confirm(...)请求来执行此操作：

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

如果相反我希望显示ngx-bootstrap 模式，请说两个按钮＆＃34;是＆＃34;或＆＃34;否＆＃34;并获得类似的结果？

编辑：就我而言，我通过与主题一起解决了我的问题。 Here你可以找到我的解决方案，以防它对其他人有用。但是，该解决方案无法解决这个问题，即关于从模态返回值的问题，所以我将其保持打开状态。

Answer 1

试试这样：

myexample它工作正常。希望这会对你有所帮助

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

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

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

Answer 2

我使用了来自@Chandru的解决方案，然而返回 true或false，而不是：

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

我只是用过：

openConfirmDialog() {
    this.modalRef = this.modalService.show(HomeModalComponent);
    return this.modalRef.content.onClose;
}

Answer 3

@ShinDarth您可以在服务中添加此功能，并在需要时调用此功能。

在您的服务中，创建此功能

XDocument.Load

在demo-modal.component.ts中，创建一个EventEmitter

    openConfirmDialogBox() {
        this.modalRef = this.modalService.show(DemoModalComponent);
        this.modalRef.content.action.take(1)
            .subscribe((value) => {
                console.log(value) // here value passed on clicking ok will be printed in console. Here true will be printed if OK is clicked
                return value;
             }, (err) => {
                 return false;
        });
    }

我希望这会对你有所帮助

Answer 4

据我所知，上面的大多数答案都是完全有效的，但主要目标是能够以这种方式调用确认对话框......

  async openModalConfirmation() {
    const result = await this.confirmationSvc.confirm('Confirm this...');
    if (result) {
      console.log('Yes!');
    } else {
      console.log('Oh no...');
    }
  }

请注意，这主要是语法糖，以简化promise和异步内容的使用。

我认为这是OP正在寻找的东西，并且可能会被重新设计以支持返回任何其他数据类型（除了布尔值）。

下面的其余代码（不包括保持此简短的模板），非常简单..

<强> ModalConfirmationService

import { ModalConfirmationComponent } from './component';

@Injectable()
export class ModalConfirmationService {

  constructor(private bsModalService: BsModalService) {}

  confirm(message: string): Promise<boolean> {
    const modal = this.bsModalService.show(ModalConfirmationComponent, { initialState: { message: message }});

    return new Promise<boolean>((resolve, reject) => modal.content.result.subscribe((result) => resolve(result) ));
  }
}

ModalConfirmationComponent

import { Component, Input, Output, EventEmitter} from '@angular/core';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
import { Subject } from 'rxjs/Subject';

@Component({
  templateUrl: './component.html'
})
export class ModalConfirmationComponent {
  @Input() message: string;
  result: Subject<boolean> = new Subject<boolean>();

  constructor(public modalRef: BsModalRef) { }

  confirm(): void {
    this.result.next(true);
    this.modalRef.hide();
  }

  decline(): void {
    this.result.next(false);
    this.modalRef.hide();
  }
}

Answer 5

我不知道是否适合您，但我为Subject提供了一项服务。 在父组件中，足以进行订阅和退订；在模式组件中，当用户单击确认按钮时，只需使用next发出值即可。

很抱歉，我没有提供完整的示例，但是下面的伪代码应该可以提出这个想法。

服务：

 token_vector[index] = strdup(token);

父组件：

export class SomeService{
    yourSubject: new Subject<string>();
}

模式组件：

...
ngOnInit(){
    this.bsModalRef = this.someService.yourSubject.subscribe ( val => ...);
}
ngOnDestroy(){
    this.bsModalRef.unsubscribe();
}
...

Ps。当然，您需要在适当的位置提供服务并将其注入组件中：-）

Answer 6

尝试以下对我有用的选项。 callbackOnModelWindowClose是返回值。

letter

Answer 7

尝试一下：

home.component.ts

Row

和

home-modal.component.ts

Row

Answer 8

如果您使用的是Angular的更高版本，由于BsModalRef的位置已移动，可能会出现错误：

使用此位置：

import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';

而不是：

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

Answer 9

试试看！！！！ 使用选项yes函数和no函数创建模式选项。 接收args作为@Input ...

import { Component, OnInit, Input } from '@angular/core';
import { BsModalRef } from 'ngx-bootstrap/modal';

@Component({
    selector: 'confirm-box',
    templateUrl: './confirm-box.component.html',
    styleUrls: ['./confirm-box.component.css']
})
export class ConfirmBoxComponent implements OnInit {
    private _args: any;

    public get args(): any {
        return this._args;
    }

    @Input()
    public set args(value: any) {
        this._args = value;
    }

    constructor(private activeModal: BsModalRef) {
    }

    ngOnInit(): void {
    }

    public no(): void {
        this.args.noFunction();
        this.activeModal.hide();
    }

    public yes(): void {
        this.args.yesFunction();
        this.activeModal.hide();
    }
}

然后启动对话框的组件或服务：

import { BsModalService, BsModalRef, ModalOptions } from 'ngx-bootstrap/modal';
import { ConfirmBoxComponent } from '../../dialogs/confirm-box/confirm-box.component';

export class AreYouSure {    
    private activeModal: BsModalRef;

    constructor(private modalService: BsModalService) {
          //Wait five seconds before launching the confirmbox
          setTimeout(()=>{
             this.tryLaunchConfirm();
          }, 5000);
    }
    private tryLaunchConfirm(): void {
        const config: ModalOptions = {
            initialState: {
                args: {
                    title: "Confirm This",
                    message: "Are you really sure???",
                    yesFunction: () => { console.log("YES!!!! was clicked."); },
                    noFunction: () => { console.log("NO!!!! was clicked."); }
                }
            }
        }
        this.activeModal = this.modalService.show(ConfirmBoxComponent, config);

    }
}