Как скрыть бутстрап модальный в угловой - PullRequest
Новая
       24

Как скрыть бутстрап модальный в угловой

0 голосов
/ 16 октября 2018

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

Я использую angular6.

Код 

<div #exampleModal class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">

  @ViewChild('exampleModal') public exampleModal: ElementRef;

 this.exampleModal.hide();

Сообщение об ошибке

ОШИБКА TypeError: this.exampleModal.hide не является функцией

Ответы [ 3 ]

0 голосов
/ 17 октября 2018

Вы можете использовать модал ngx-bootstrap для управления модалом из кода.https://valor -software.com / ngx-bootstrap / # / modals

0 голосов
/ 28 июня 2019

Вы можете добавить кнопку HTML закрытия в вашем модальном диалоговом окне и добавить переменную шаблона #closebutton

В коде ts вы вызываете this.closebutton.nativeElement.click();, чтобы закрыть модальное диалоговое окно.

HTML 

<div class="container">
  <h2>Modal Close</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" #closebutton class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
            <p>Content here</p> 
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" id="closeModal"  (click)="onSave()">Save</button>
         </div> 
      </div>
    </div>
  </div>

</div>

TS 

export class AppComponent implements OnInit {
  @ViewChild('closebutton') closebutton;

  constructor(private fb: FormBuilder) { }

  public ngOnInit() {

  }

  public onSave() {
    this.closebutton.nativeElement.click();
  }
}

Демонстрация https://stackblitz.com/edit/angular-close-bootstrap-modal?file=src/app/app.component.html

Обновление:

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

На первом этапе вам нужно установить jquery и bootstrap с помощью команды npm.

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

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

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

0 голосов
/ 16 октября 2018

У меня есть еще один вариант, который очень прост и работает для меня.

Пример: это код вашей модели в файле HTML.

<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" id="closeModel">&times;</button>
    <h4 class="modal-title">Modal Header</h4>
  </div>
  <div class="modal-body">
    <!-- Do your stuff -->
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal" >Close</button>


  </div>
</div>

Теперь в вашем .ts файле, где вы хотите закрыть модальный режим, просто используйте jquery для этого.

Примечание: для этого вам нужно установить jquery и импортировать в файл.

Теперь нажмите кнопку close с помощью jquery.

$(document).ready(function(){    
    $("#closeModel").click();  // That's it... Model will close. 
});
...