如何在角度点击提交按钮时关闭模态弹出窗口（不使用引导代码的数据关闭模式）？

Question

如何在表单提交上关闭Modal Popup？

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()方法