Question

我在线尝试了很多方法，但是无法正常工作。这是我的组件。 onSubmit，一个建议是使用NgbActiveModal关闭，但我无法关闭它。 onSubmit，我有NgbActiveModal调用close函数，但是它不起作用，我不确定为什么会这样。

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

    import {NgbModal, ModalDismissReasons, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
    import {NgForm} from "@angular/forms";

    @Component({
      selector: 'ngbd-modal-basic',
      templateUrl: './userstuff.component.html'
    })
    export class UserstuffComponent {
      closeResult: string;
      bookTitle;

      constructor(private modalService: NgbModal, public ngbModalService: NgbActiveModal) {}

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

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

      onSubmit(form : NgForm) {
        console.log(form.value);
        this.ngbModalService.close();
      }
    }

这是我的html

<ng-template #content let-c="close" let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title">Profile update</h4>
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
      <span aria-hidden="true">&times;yo</span>
    </button>
  </div>
  <div class="modal-body">
    <form (ngSubmit)="onSubmit(borrowBook)" #borrowBook="ngForm">
      <div class="form-group">
        <label for="bookTitle">Title of book</label>
        <input type="text" class="form-control" id="bookTitle" placeholder="Title of Book"
               required [(ngModel)]="bookTitle" name="bookTitle">
      </div>
      <button type="submit" class="btn btn-default">Borrow!</button>
    </form>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-dark" (click)="c('with save')">Save</button>
  </div>
</ng-template>

<button class="btn btn-lg btn-outline-primary" (click)="open(content)">Launch demo modal</button

Answer 1

当您打开 NgbModal 服务的方法时，会返回一个 NgbModalRef 类型的引用，您可以使用它来关闭模式。我在下面修改了你的代码。以 (//--) 开头的注释行表示更改。

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

import {NgbModal, ModalDismissReasons, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
import {NgForm} from "@angular/forms";

@Component({
  selector: 'ngbd-modal-basic',
  templateUrl: './userstuff.component.html'
})
export class UserstuffComponent {
  closeResult: string;
  bookTitle;
  modalRef: NgbModalRef; //--MODAL REF

  //--NgbActiveModal is not needed
  constructor(private modalService: NgbModal) {}

  open(content) {//--Save the returned modal reference
    this.modalRef = this.modalService.open(content).result.then((result) => {
      this.closeResult = `Closed with: ${result}`;
      console.log(this.closeResult);
    }, (reason) => {
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
      console.log(this.closeResult);
    });
  }

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

  onSubmit(form : NgForm) {
    console.log(form.value);
    this.modalRef.close(); //--Close
  }
}

无法使用NgbActiveModal关闭模态

1 个答案: