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

Question

我正在做一个 Angular 项目(目前是第 5 版)，并使用 ng-bootstrap。

我遵循了 ng-bootstrap 文档，并通过一些修改获得了一个模态组件，我可以从多个组件调用它，每次都传递一个唯一的标题和消息。

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

我的目的是将其用作“您确定要删除此内容吗？”之类的确认模态。等等

在这里查看这个 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 暂停代码执行并在对话框关闭时返回 closeResult，或者使 closeResult 可用作 Observable，但我似乎无法让它按照我需要/期望的方式工作到。

以下代码在Plunkr中，是我项目中使用的代码基于ng-bootstrap example 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

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

@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)
}