如何單擊有角的提交按鈕時關閉模式彈出窗口（不使用引導代碼的數據釋放模式）？

Question

如何關閉表單提交中的模式彈出窗口？

Answer 1

如果您使用ng-bootstrap創建模態，則可以在構造函數中聲明modalservice，然后close函數將起作用。

constructor(private modalService: NgbActiveModal){}

    public onClick(id: number): void{
        this.modalService.close();
        //Your code goes here
    }

如果您遵循模態窗口的不同邏輯。 請張貼一些代碼，以便任何人都能為您提供更好的解決方案。

Answer 2

import { Component, TemplateRef } from '@angular/core';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';

@Component({
  selector: 'demo-modal-service-static',
  template: `<button type="button" class="btn btn-primary" (click)="openModal(template)">Create template modal</button>

<ng-template #template>
  <div class="modal-header">
    <h4 class="modal-title pull-left">Modal</h4>
    <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    This is a modal.
  </div>
</ng-template>`
})
export class DemoModalServiceStaticComponent {
  modalRef: BsModalRef;
  constructor(private modalService: BsModalService) {}

  openModal(template: TemplateRef<any>) {
    this.modalRef = this.modalService.show(template);
  }
}

使用hide()方法