Ответ 1

Помимо ответа @MattScarpino другой вариант - просто измените тип кнопки на button с submit и вызовите свою функцию submitComments() и в то же время вызовите dismiss-modal. делая это, вы можете одновременно отказаться от модальных функций и вызовов, надеясь, что это может вам помочь. вот пример:

<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">Open Modal</button>

<div id="myModal" class="modal fade">
     <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <form>
                    <div class="form-group row">
                        <label class="form-control-label col-sm-2">Comments:</label>
                        <div class="col-sm-10">
                            <textarea class="form-control" rows="3"></textarea>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="button" (click)='submitComments()' data-dismiss="myModal" class="btn btn-default">Submit</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

Update

если вы хотите закрыть модальный со стороны вашего контроллера, вы можете использовать этот способ

$("#myModal").modal("hide");

Ответ 2

Вы можете сделать это, просто объявив переменную jQuery с любым типом внутри контроллера Angular2.

declare var jQuery:any;

Добавьте это сразу после операторов импорта и перед декодером компонентов.

Затем загрузите bootstrap с его идентификатором id.

jQuery("#myModal").modal("hide");

Ответ 3

Используя @ViewChild

добавить #closeBtn к элементу с data-dismiss="modal"

<a><i class="fa fa-close" data-dismiss="modal" #closeBtn></i></a>

Компонент html

<div class="modal fade" id="yourModalId">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <a><i class="fa fa-close" data-dismiss="modal" #closeBtn></i></a>
      </div>
      <div class="modal-body">
      </div>
      <div class="modal-footer">
      </div>
    </div>
  </div>
</div>

используя this.closeBtn.nativeElement.click();, чтобы вызвать событие click, закроет ваш модальный.

Компонент typescript

import {ViewChild, ElementRef} from '@angular/core';
@Component({
    moduleId: ...,
    selector: '.',
    templateUrl: '.',
    styleUrls: ['.']
})
export class yourClass {
    @ViewChild('closeBtn') closeBtn: ElementRef;

    yourFunction() {
        //do something
        ...
        ...
        //close your modal
        this.closeModal();
    }

    //call this wherever you want to close modal
    private closeModal(): void {
        this.closeBtn.nativeElement.click();
    }
}

Ответ 4

Сначала установите свойство div hidden равным переменной:

<div id="myModal" [hidden]="hideModal" class="modal fade">

Во-вторых, в классе определите логическое имя с именем hideModal и установите для него значение false:

hideModal: boolean = false;

В-третьих, в submitComments() установите hideModal в значение true.

Ответ 5

Идеальный ответ в этой вселенной.........................

шаг 1: дать уникальный идентификатор кнопке увольнения модального

шаг 2: после успешной отправки формы или завершения вызова задачи

document.getElementById("addProductCloseButton").click();

в вашем классе

Ответ 6

Попытайтесь не включать форму в свое модальное тело, вместо этого добавьте две кнопки для того же самого в разделе нижнего колонтитула.

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span aria-hidden="true">&times;</span></button>
          </div>
          <div class="modal-body">
    <label class="form-control-label col-sm-2">Comments:</label>
                    <div class="col-sm-10">
                        <textarea class="form-control" rows="3"></textarea>
                    </div>
          </div>
          <div class="modal-footer">
            <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Close</button>
            <button type="submit" class="btn btn-primary" >Save changes</button>
          </div>
        </div>
      </div>
    </div>