Как закрыть модель начальной загрузки 4, вызвав функцию в машинописи

Question

Я использую модал начальной загрузки 4, за которым следует пример

Ниже приведен шаблон код:

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

Как мне закрыть modal, вызвав метод save() в typescript?

DEMO Stackblitz

Answer 1

Правильный способ сделать это в Angular / Typescript - использовать ViewChild .

Первый импорт ViewChild:

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

Добавить эту строку в свойкомпонент, с селектором по вашему выбору:

@ViewChild('myModalClose') modalClose;

Добавьте тег myModalClose в вашем HTML (здесь мы нацелены на кнопку закрытия):

<!-- 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();

---

Рабочая Stackblitz

Answer 2

У меня есть другое решение без трюка на кнопке закрытия.

Первый шаг: вам нужно установить jquery и bootstrap командой npm.

Во-вторых, вам нужно добавить declare var $ : any; в компонент ( важный шаг )

И использовать можно использовать $('#myModal').modal('hide'); на onSave() метод

Демо https://stackblitz.com/edit/angular-model-bootstrap-close?file=src/app/app.component.ts

Answer 3

Вы также можете использовать ng-bootstrap для управления всем этим в вашем классе компонентов. ng-bootstrap

В коде компонента машинописного текста вам нужно внедрить NgbActiveModal в конструктор следующим образом:

constructor(public activeModal: NgbActiveModal){}

, а затем в методе сохранения вы можете просто закрыть его:

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

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>