如何通过在打字稿中调用函数来关闭Bootstrap 4模型

Question

我正在使用bootstrap 4 modal后面的示例

下面是模板代码：

<div class="container">
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
      Open
    </button>

    <div class="modal" id="myModal">
      <div class="modal-dialog">
        <div class="modal-content">

          <!-- Modal Header -->
          <div class="modal-header">
            <h4 class="modal-title">Modal Heading</h4>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
          </div>

          <!-- Modal body -->
          <div class="modal-body">
            Modal body..
          </div>

           <button type="button" class="btn btn-danger"  (click)="save()">Save</button>

        </div>
      </div>
    </div>

  </div>

在单击open按钮时，我打开对话框窗口，单击save按钮时，我将调用save()方法。在.ts中，我在save方法中编写了一些条件，如下所示：

 save(){
  if(condition){
    ......don't close the modal....
  } else{
   ......close the modal....
   }
 }

如何通过在typescript调用save()方法来关闭modal ？

Stackblitz演示

Answer 1

在Angular / Typescript中执行此操作的正确方法是使用ViewChild 。

首先导入ViewChild ：

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

通过选择器将以下行添加到您的组件中：

@ViewChild('myModalClose') modalClose;

在您的html中添加标签myModalClose （这里我们以关闭按钮为目标）：

<!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" #myModalClose class="close" data-dismiss="modal">&times;</button>
      <h4 class="modal-title">Modal Header</h4>
    </div>
  ...

在您的save()方法中：

this.modalClose.nativeElement.click();

---

工作堆闪电战

Answer 2

您也可以使用ng-bootstrap在组件类中控制所有这些。 NG-引导

在打字稿组件代码中，您需要像这样在构造函数中注入NgbActiveModal：

constructor(public activeModal: NgbActiveModal){}

然后在save方法中，您可以将其关闭：

save(){
if(condition){
    ......don't close the modal....
  } else{
   this.activeModal.close();
   }
}

Answer 3

我有关闭按钮上没有窍门的另一种解决方案。

第一步，您需要通过npm命令安装jquery和bootstrap 。

其次，您需要添加declare var $ : any; 在组件中（ 重要步骤 ）

使用可以使用$('#myModal').modal('hide'); on onSave()方法

演示https://stackblitz.com/edit/angular-model-bootstrap-close?file=src/app/app.component.ts

Answer 4

使用Ngx引导程序https://valor-software.com/ngx-bootstrap/#/modals

这是ngx引导模式的通用组件。

<!-- Contains insides of a host element e.g. button text or link text -->
<ng-content></ng-content>
<!-- Dialog box content -->
<ng-template #modalWrapper>
  <!-- Header template -->
  <div class="modal-header">
    <h3 class="modal-title pull-left">{{ modalTitle }}</h3>
    <button type="button" class="close pull-right" aria-label="Close" (click)="closeModal()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <!-- Body template that consist of provided template reference content -->
  <div class="modal-body">
    <ng-container [ngTemplateOutlet]="modalContent"></ng-container>
  </div>
</ng-template>

Component.ts

export class AppModalComponent implements OnInit, OnChanges {
  /** Template Reference that is displayed as part of dialog box content */
  @Input('app-modal') public modalContent: TemplateRef<any>;
  /** Title of the dialog box */
  @Input() public modalTitle: string = '';
  /** Defines if modal is open */
  @Input() public isOpenByDefault: boolean = false;
  /** Modal reference */
  public modalRef: BsModalRef;
  /** Content config object */
  @Input() public config: ModalOptions = {};
  /** Event on modal open */
  @Output() public open = new EventEmitter<void>();
  /** Event on modal close */
  @Output() public close = new EventEmitter<void>();
  /** Wrapper template reference */
  @ViewChild('modalWrapper') public content: TemplateRef<any>;

  /** Injects modalService to manipulate modals */
  constructor(private modalService: BsModalService) { }

  public ngOnChanges(changes: SimpleChanges) {
    if (changes.config) {
      this.modalService.config = changes.config.currentValue;
    }
  }

  public ngOnInit(): void {
    this.isOpenByDefault ? this.openModal() : this.closeModal();
  }

  /** On click of host element opens a modal with provided modal content */
  @HostListener('click')
  public openModal(): void {
    this.modalRef = this.modalService.show(this.content, this.config);
    this.open.emit();
  }

  /** On click of close button closes the modal */
  public closeModal(): void {
    if (this.modalRef) {
      this.modalRef.hide();
      this.close.emit();
    }
  }
}

用法：

<button [app-modal]="template" modalTitle="Modal Title" [isOpenByDefault]="false" #modalRef>Open modal</button>
<ng-template #template>
  <h4>Hello world</h4>
</ng-template>