Question

我正在开展Angular项目（目前是第5版），并使用ng-bootstrap。

我已经关注了ng-bootstrap文档，并且通过一些修改有一个模态组件工作，我可以从多个组件调用，每次都传递一个唯一的标题和消息。

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

我的意图是将其用作确认模式，例如“你确定要删除它吗？”＃39;等

请在此处查看此Plunkr：http://plnkr.co/edit/4thFjHietATRYn6g24ie?p=preview

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

window.onpopstate = function(event) {
  console.log('same state',
    JSON.stringify(event.state) === JSON.stringify(history.state) // always true
  );
};

const obj1 = {page: 1};
history.pushState(obj1, "title 1", "?page=1");

console.log('[SameObject]', history.state === obj1); // false
console.log(history.state); // {page: 1}

history.pushState({page: 2}, "title 2", "?page=2");
history.replaceState({page: 3}, "title 3", "?page=3");
history.back();
history.back(); 
history.go(2);

我希望代码在执行之前等待结果，并且我不确定是否应该使用循环来跟随模态，直到设置了closeResult值，但是这看起来并不像正确的方法来解决这个问题。

我原本期望Modal暂停代码执行并在关闭对话框时返回closeResult，或者将closeResult作为Observable使用，但我似乎无法使其按照我需要的方式工作/期待它。

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

我的modal-basic.ts文件：

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

modal-basic.html文件：

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}`;
    }
  }
}

app.ts文件：

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

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

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

1 个答案: