ng-bootstrap Angular 中的模态对话框 - 在继续执行之前获取 closeResult 值

Question

我正在开发一个 Angular 项目（当前版本 5），并使用 ng-bootstrap。

我已按照 ng-bootstrap 文档进行操作，经过一些修改后，模态组件可以正常工作，我可以从多个组件调用它，每次都传递一个唯一的标题和消息。

当模态关闭时，我通过组件上的 {{confirmationModal.closeResult}} 取回了 closeResult，但我无法及时在代码中取回它以根据结果分支执行。如果我再次打开模态，该值在我的方法中可用于先前的 closeResult，但不是当前结果。

我的目的是将其用作 'Are you sure you want to delete this?' 等事情的确认模态

在这里查看这个 Plunkr：http://plnkr.co/edit/4thFjHietATRYn6g24ie?p=preview

您可以在记录的输出中看到，第一个 closeResult 未定义，因为函数中的代码在模态可见时继续执行。再次调用Modal时，之前的closeResult被注销

[Log] this.confirmationModal.closeResult – undefined
[Log] this.confirmationModal.closeResult – "Dismissed with: Cancel"
[Log] this.confirmationModal.closeResult – "Closed with: Ok"
[Log] this.confirmationModal.closeResult – "Dismissed with: Cancel"
[Log] this.confirmationModal.closeResult – "Dismissed with: Cross click"

我希望代码在执行之前等待结果，我不确定是否应该在模态之后循环直到设置 closeResult 值，但这似乎不是正确的方法来处理这个。

我本来希望 Modal 在关闭对话框时暂停代码执行和 return closeResult，或者使 closeResult 可用作 Observable，但我似乎无法让它正常工作我 need/expect 的方式。

以下代码在Plunkr中，是我项目中使用的代码基于ng-bootstrap示例Plunkr的修改版本。

我的 modal-basic.ts 文件：

import {Component, Input, ViewChild} from '@angular/core';

import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'ngbd-modal-basic',
  templateUrl: 'src/modal-basic.html'
})
export class NgbdModalBasic {
    @Input()
    title

    @Input() 
    message;

    @ViewChild('content') content: any;

  closeResult: string;

  constructor(private modalService: NgbModal) {}

  open(content) {
    this.modalService.open(this.content).result.then((result) => {
      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
  }

  private getDismissReason(reason: any): string {
    if (reason === ModalDismissReasons.ESC) {
      return 'by pressing ESC';
    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
      return 'by clicking on a backdrop';
    } else {
      return  `with: ${reason}`;
    }
  }
}

modal-basic.html 文件:

 <ng-template #content let-c="close" let-d="dismiss">
        <div class="modal-header">
        <h4 class="modal-title">{{title}}</h4>
        <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
            <span aria-hidden="true">&times;</span>
        </button>
        </div>
        <div class="modal-body">
        <p>{{message}}</p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-outline-dark" (click)="d('Cancel')">Cancel</button>
            <button type="button" class="btn btn-outline-dark" (click)="c('Ok')">Ok</button>
        </div>
    </ng-template>

app.ts 文件:

import { Component, NgModule, ViewChild } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { NgbdModalBasic } from './modal-basic';

@Component({
  selector: 'my-app',
  template: `
    <div class="container-fluid">

    <hr>
    <p>
      This is a demo plnkr forked from the <strong>ng-bootstrap</strong> project: Angular powered Bootstrap.
      Visit <a href="https://ng-bootstrap.github.io/" target="_blank">https://ng-bootstrap.github.io</a> for more widgets and demos.
    </p>
    <hr>

<button type="button" class="btn btn-outline-dark" (click)="openModal()">Open Modal</button>

    <ngbd-modal-basic [message]='message' [title]='title' #confirmationModal></ngbd-modal-basic>{{confirmationModal.closeResult}}
  </div>
  `
})
export class App {

    title: string;
  message: string;

  @ViewChild('confirmationModal') confirmationModal: NgbdModalBasic;

 openModal() {
    this.title = "Title of the Modal";
    this.message = "Modal message.";

    this.confirmationModal.open();

    console.log("this.confirmationModal.closeResult", this.confirmationModal.closeResult);
 }
}   

@NgModule({
  imports: [BrowserModule, FormsModule, ReactiveFormsModule, HttpClientModule, NgbModule.forRoot()], 
  declarations: [App, NgbdModalBasic]
  bootstrap: [App]
}) 
export class AppModule {}

Answer 1

你可以使用@Output，所以，在你的 ngb-modal-basic

@Output() close: EventEmitter<any> = new EventEmitter();
...
open(content) {
    this.modalService.open(this.content).result.then((result) => {
      this.closeResult = `Closed with: ${result}`;
      this.close.emit(result); //<---return the result
    }, (reason) => {
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
      this.close.emit(result); //<---return the result
    });
  }

您可以在您的组件中使用：

<ngbd-modal-basic [message]='message' [title]='title' #confirmationModal (close)="close(result)"></ngbd-modal-basic>
... and
close(result)
{
   console.log(result)
}

ng-bootstrap Angular 中的模态对话框 - 在继续执行之前获取 closeResult 值

ng-bootstrap modal dialog in Angular - getting closeResult value before continuing execution

angular

modal-dialog

twitter-bootstrap-4

ng-bootstrap